四つ角それぞれの角でborder-radiusを指定する方法

ブロック要素の角に丸みを帯びさせるプロパティであるborder-radiusで四つ角それぞれの丸みの値を指定する方法。

値を一つだけだと四つ角全てが丸みを帯びてしまう。

div{
   border-radius:48px;
}

下記のように4つの数値を指定するとそれぞれ左上、右上、右下、左下の丸みを指定することができる

div{
   border-radius:48px 5px 0 50%;
}

値が2つの場合は一つ目の値が左上と右下、二つ目の値が右上と左下を指す。

div{
   border-radius:48px  0 ;
}

コメント

タイトルとURLをコピーしました