上下左右の丸み
丸みの個別指定

Get Code

背景色  
ボックスカラー  

click to open

preview

Copy

X

コピーしました

border-radius

仕様

初期値 0
適用対象 すべての要素(border-collapseプロパティの値にcollapseが指定されたtable要素を除く)
値の継承 しない

設定できる値

スペース区切りで丸みを指定します。

それぞれ違う値を指定する場合は
<左上> <右上> <右下> <左下>

border-radius: 15px 20px 10px 30px;

サンプルコードの結果

右上・左下の値をまとめて指定する場合は
<左上> <右上・左下> <右下>

border-radius: 15px 20px 15px;

サンプルコードの結果

左上・右下の値、右上・左下の値それぞれをまとめて指定する場合は
<左上・右下> <右上・左下>

border-radius: 15px 20px;

サンプルコードの結果

左上・右上・右下・左下の値をまとめて指定する場合は
<左上・右上・右下・左下>

border-radius: 15px;

サンプルコードの結果

スポンサーリンク

スポンサーリンク

pagetop