CSS角丸いろいろ

2016.3.7 (月)

border-radius

ブロック要素に対して角丸ができます。
(IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降のみ)

border: 3px green solid;
border-radius: 5px;

各箇所を個別に丸くする

border-top-left-radius: 5px;     /* 左上 */
border-top-right-radius: 5px;    /* 右上 */
border-bottom-left-radius: 5px;  /* 左下 */
border-bottom-right-radius: 5px; /* 右下 */