border-radius系統の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)
目次
1.border-radius系統とは?
border-radius系統のプロパティはボーダーの角丸を指定します。
角丸の形状は半径で指定し、ボーダーの外側の輪郭に反映されます。
値の指定方法は以下の通りです。
{ border-top-left-radius: 値; }
{ border-top-right-radius: 値; }
{ border-bottom-right-radius: 値; }
{ border-bottom-left-radius: 値; }
値の指定方法
値は1つまたは半角スペースで区切って2つ指定できます。
1つの場合、水平・垂直方向の両方の指定、2つの場合、水平方向、垂直方向の順の指定になります。
2.border-radius系統の使い方
それではborder-radius系統の使い方をみていきましょう。
.border-sample {
border: 5px solid red;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
他にも値を設定できるのでいろいろと試してみることをお勧めします!