2013
18
Nov
cssのみで角丸を作成する。
いつも忘れるのでメモ。
css3を使うと、角を丸くするのは簡単です。
このブログの角丸も全部CSSでやっています。
[全体の場合]
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
[左上のみ]
border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px;
[右上のみ]
border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px;
[左下のみ]
border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
[右下のみ]
border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px;
[上部分のみの場合]
※タグのデザインを作成するときによく使います。右上、左上を設定すればOKです。
border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px;
