CSSで一部の端っこのみ角丸を付ける

divなどに角丸を付ける時はborder-radiusを使います。

/* 全箇所 */
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;

だけどこれだとすべての端(隅)に角丸が付いてしまいます。
右上だけ、左下のみなど、一部の端っこのみに角丸を付ける時は以下のように書きます。

/* 左上のみ角丸 */
border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;

/* 右上のみ角丸 */
border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;

/* 左下のみ角丸 */
border-bottom-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;

/* 右下のみ角丸 */
border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;

参考までにどうぞ。

Posted in CSSTagged by.