WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > border-radius
border-radius  角丸 

角丸にする。

このエントリーをはてなブックマークに追加
CSS3の草案です。

書式例

border-radius: 10px;

互換性について

border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */

サンプルコード


<div style="height:50px; background-color:#f0f0ff;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;">
丸み5px
</div>
丸み5px

<div style="height:50px; background-color:#f0f0ff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;">
丸み10px
</div>
丸み10px

<div style="height:50px; background-color:#f0f0ff;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;">
丸み20px
</div>
丸み20px