border-radiusプロパティの概要
| borderを角丸にするCSS | ||
| border-radius | ||
| 目的 | 要素の枠線を角丸にする | |
| 使用 | 全て | |
| 関連 | border | |
| 初期 | border-radius : 0 0 0 0; | |
span要素のborderを角丸にする | ||
<span style="font-size: 24px; border: solid 2px #ff0000; border-radius: 4px 4px 4px 4px;">span要素のborderを角丸にする</span> | ||
値
border : 左上の半径 右上の半径 右下の半径 左下の半径
未指定の場合、初期値である0が選択される。つまり、直角のまま。
値の指定数
| 値が1つ | 全て4px |
| border-radius: 4px; | |
| 値が2つ | 左上右↓4px、右上左下8px |
| border-radius: 4px 8px; | |
| 値が3つ | 左上4px 右上左下8px 右下12px |
| border-radius: 4px 8px 12px; |
backgroundとの関係、デザイン例
border-radius: 20px 5px 30px 50px;
border-radius: 75px 5px 5px 75px;