Houn

2021.06.16

Web制作メモ

【CSS】border-radiusを上下左右の特定方向にだけ当てて角丸を作る

上だけ、左だけ、右上だけ‥といった具合に、特定の方向にだけborder-radiusを当てて角を丸くする方法です。

このように1方向ずつ指定ができます。


border-radius: 10px 20px 30px 40px; 
/* 左上・右上・右下・左下 */

marginやpaddingなんかでは上右下左と、上から始まり時計回り順に数値を一括で指定できますが、border-radiusの場合は左上始まりで指定していきます。

例1:右下にだけ指定

右下1方向だけ角丸にしたい場合はこうなります。


border-radius: 0 0 0 32px; 

ただ、1方向だけの場合なら以下のほうがスマートかも知れません。


border-bottom-right-radius: 32px;

『border-(タテ)-(ヨコ)-radius』と、プロパティ名として指定ができます。

『margin-bottom』みたいなものですね。

例2:対角線上に指定する

また、このように書くと


border-radius: 32px 0;"

左上・右下といったふうに、対角線上に指定もできます。

margin: 40px 0;のような、省略した書き方ですね。

Share on SNSシェア

Related 関連記事