2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] border-radiusプロパティでボーダーの角丸をまとめて指定しよう!

border-radiusの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.border-radiusとは?

border-radiusプロパティはボーダーの角丸をまとめて指定できます。

値の指定方法は以下の通りです。

{ border-top-left-radius: -top-left -top-right -bottom-right -bottom-left; }

値の指定方法

値は半角スペースで区切って4つまで指定できます。

4つ指定した場合、左上、右上、右下、左下の順に適用されます。

値を省略した場合、以下のような指定となります。

  • 値が1つの場合:すべての角に同じ値が適用される
  • 値が2つの場合:1つ目が左上角と右下角、2つ目が右下角と左下角に適用される
  • 値が3つの場合:1つ目が左上角、2つ目が右上角と左下角、3つ目が右下角に適用される




2.border-radius系統の使い方

それではborder-radius系統の使い方をみていきましょう。

.border-sample {
 border: 5px solid red;
 border-radius: 5px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です