CSS3 divなどで角を丸くする方法

Facebook にシェア
Pocket
LINEで送る
このエントリーを Google ブックマーク に追加

簡単だけどよく使う。

[amazonjs asin=”B00M0ESXUI” locale=”JP” title=”Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法”]

4角を丸くする場合は以下のように指定する。

[css] border-radius: 10px;

/* Safari,Chrome */
-webkit-border-radius: 10px;

/* Firefox */
-moz-border-radius: 10px;

[/css]

以下のようにして適用してみる。
[css] .main {
border-radius: 10px;

/* Chrome Safari */
-webkit-border-radius: 10px;

/* Firefox */
-moz-border-radius: 10px;

padding: 10px;
background-color: #EEEEEE;
}
[/css]

スクリーンショット 2015-08-27 14.35.57

 

部分的に角を丸くする場合は、

[css] /* Chrome Safari 左上 */
-webkit-border-top-left-radius: 10px;
/* Chrome Safari 右上 */
-webkit-border-top-right-radius: 10px;
/* Chrome Safari 右下 */
-webkit-border-bottom-right-radius: 10px;
/* Chrome Safari 左下 */
-webkit-border-bottom-left-radius: 10px;

/* Firefox 左上 */
-moz-border-radius-topleft: 10px;
/* Firefox 右上 */
-moz-border-radius-topright: 10px;
/* Firefox 右下 */
-moz-border-radius-bottomright: 10px;
/* Firefox 左下 */
-moz-border-radius-bottomleft: 10px;
[/css]

でできる。

Related posts

コメントを残す