CSS 角丸 border-radius の設定方法
公開日
by
CSS で角丸を border-radius で設定する方法を紹介します。
例えば、角丸ボタンや正円を作りたい時に便利な方法です。
CSS 角丸 border-radius の設定方法
CSS で角丸表現をするには border-radius プロパティを使用します。
角丸の四隅を一括指定する方法や、四隅の大きさを細かく設定できるので、順を追って詳しく説明します。
角丸の四隅を一括で設定する方法
四隅の角丸のサイズを一括で設定する場合は border-radius に値を一つ設定します。
実際の見た目とCSSの指定は次のようになります。
.radius {
border-radius: 20px;
}
角丸の四隅を別々の値で設定する方法
四隅の角丸のサイズをバラバラに設定する場合は border-radius に値を四つ指定します。
値は左から「左上→右上→右下→左下」の順番。
実際の見た目とCSSの指定は次のようになります。
.radius {
border-radius: 10px 20px 30px 40px;
}
また、四隅の角丸を次のようにダイレクトに直接指定することもできます。
.radius {
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
}
角丸の横と縦の値を別々に設定する方法
個々の角丸の横と縦のサイズをバラバラに設定する場合は border-radius に、横の値を四つ、スラッシュで区切って縦の値を四つ指定します。
値は左から「左上の横→右上の横→右下の横→左下の横」、スラッシュを挟んで「左上の縦→右上の縦→右下の縦→左下の縦」の順番。
実際の見た目とCSSの指定は次のようになります。
.radius {
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}
まとめ
CSS で角丸を border-radius で設定する方法を紹介しました。
