画像を使わず、CSSで角丸にする

画像を使わず、CSSで角丸にする

画像を使わず、角丸を実装できるCSS3プロパティ「border-radius」の書き方のメモ。
サンプルもあります。

以下のサンプルに「border-radius」で角丸の半径を指定していきます。

sample
<!-- html -->
<div class="sample">
sample
</div>
/* css */
.sample {
width: 80%;
padding: 20px 10px;
border: 1px solid #333;
background-color: #ffc;
}

四隅を丸く

sample
/* css */
.sample {
border-radius: 10px;
}

左上の角だけ丸く

sample
/* css */
.sample {
border-radius: 10px 0 0;
}

個別に指定

/* css */
.sample {
border-top-left-radius: 10px;
}

右上の角だけ丸く

sample
/* css */
.sample {
border-radius: 0 10px 0 0;
}

個別に指定

/* css */
.sample {
border-top-right-radius: 10px;
}

左下の角だけ丸く

sample
/* css */
.sample {
border-radius: 0 0 0 10px;
}

個別に指定

/* css */
.sample {
border-bottom-left-radius: 10px;
}

右下の角だけ丸く

sample
/* css */
.sample {
border-radius: 0 0 10px;
}

個別に指定

/* css */
.sample {
border-bottom-right-radius: 10px;
}

四隅の半径を別の値に

左上 10px、右上 20px、左下 40px、右下 30px にしてます。

sample
/* css */
.sample {
border-radius: 10px 20px 30px 40px;
}

水平方向と垂直方向の半径を指定

半径は水平方向と垂直方向をそれぞれ指定することもできます。
スラッシュ( / )で区切って「水平方向 / 垂直方向」と記述します。

sample
/* css */
.sample {
border-radius: 10px / 30px;
}

四隅の水平方向と垂直方向の半径を指定

sample
/* css */
.sample {
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
}

「border-radius:(水平方向)左上 右上 右下 左下 /(垂直方向)左上 右上 右下 左下;」と記述するので混乱しそうですが、いろいろ試行錯誤するのも楽しそうです。

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事