【CSS】border-radius - 角の曲線
CSSのborder-radiusプロパティをご紹介します。
border-radius
border-radiusは要素の角の曲線を示すプロパティです。
各角の左上角、右上角、左下角、右下角を個別に定義するにはborder-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radiusを使用します。
基本構文
値が１つ
全ての角に適用します。
border-radius: 値;値が２つ
値1を左上と右下、値2を左下と右上に適用します。
border-radius: 値1 値2;値が３つ
値1を左上、値2を右上と左下、値3を右下に適用します。
border-radius: 値1 値2 値3;値が４つ
値1を左上、値2を右上、値３を右下、値4を左下に適用します。
border-radius: 値1 値2 値3 値4;サンプル
サンプル１
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 20px;
}
</style>
<div></div>サンプル２
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 20px 40px;
}
</style>
<div></div>サンプル３
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 20px 40px 60px;
}
</style>
<div></div>サンプル４
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 20px 40px 60px 80px;
}
</style>
<div></div>
