角丸をつける |

ブロックなどに角丸を付ける方法

CSSで角丸を付ける事ができるようになってきましたが、過去のブラウザの独自仕様や、古いブラウザなどでは対応していない場合があります。そこで以下の3タイプの例をセットで覚えておきましょう。

border-radius:10px;　・・・CSS3
-webkit-border-radius:10px;　・・・Safari,Chrome用
-moz-border-radius:10px;　・・・Firefox

丸みや影のつけれるジェネレーターできました！

別ファイルにCSSを定義する。

①CSSを以下のように定義しました。　

CSSファイル(/test.css)のサンプル


@charset "utf-8";

.radius1 {
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid black;
}

.radius2 {
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background-color:#fff;
}

.radius3 {
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	padding:10px;
	background-color:#fff;
	border:1px solid #ccc;
}

②HTMLと表示サンプルです。

HTMLファイルのサンプル


<html>
<header>
<title>CSSのサンプル</title>
<link href="/test.css" rel="stylesheet" type="text/css" media="all" />
</header>
<body>


<div class="radius1">
.radius2のサンプル(角丸5px)
</div>


<div class="radius2">
.radius2のサンプル(角丸10px)
</div>


<div class="radius3">
.radius3 のサンプル
</div>


</body>
</html>

表示例

.radius2のサンプル(角丸5px)

.radius2のサンプル(角丸10px)

.radius3 のサンプル

角丸は見せ方や細かな設定がまだまだできますのでリファレンスまた、このジェネレーターなども参考にしてください。

ブロックやテーブルに角丸をつける

ブロックなどに角丸を付ける方法

別ファイルにCSSを定義する。

CSSファイル(/test.css)のサンプル

HTMLファイルのサンプル

表示例