border-radius (角丸)

square_border_radius cssの基本

border-radiusプロパティは「角丸」を指定する場合に使用します。


html

<div class="square_border_radius"></div>

css

.square_border_radius {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	border-radius: 10px;
}

設定方法

指定方法

border-radius: 値(一括指定)

border-radius: 左上 右上 右下 左下(個別指定)

border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下(個別指定 水平 / 垂直)

border-top-left-radius: 値(左上のみ)
border-top-right-radius: 値(右上のみ)
border-bottom-left-radius: 値(右下のみ)
border-bottom-right-radius: 値(左のみ)

数値
px / em 等で指定
パーセンテージ
%で指定

個別に設定


html

<div class="square_border_radius2"></div>

css

.square_border_radius2 {
	border-radius: 10px 30px 60px 80px;
}

個別に設定(水平 / 垂直)


html

<div class="square_border_radius3"></div>

css

.square_border_radius3 {
	width: 100px;
	height: 100px;
	background-color: #39a9d6;
	border-radius: 100px 30px 80px 20px / 50px 0 40px 10px;
}

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