2013

18

Nov

HTML・CSS

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;

タグ

同じ「HTML・CSS」カテゴリの記事
ABOUT

福岡在住、フリーランスのプログラマのメモ日記です。組込SEからWEB系に転向。子育てしながら、在宅SOHOにてお仕事しています。
ウェブサイトを作っていて困ったことや、よく調べることを書いていきます。

[対応言語]
HTML、CSS、PHP、Javascript、jQuery
Ruby On Rails、JAVA、C、C++、VB

[運営サイト]
キャラデコ弁.com
CSSデザインジェネレーター