border-radius 角を丸くする コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

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;