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

TOP > CSS >ブロックやテーブルに角丸をつける
このエントリーをはてなブックマークに追加

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

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 のサンプル
 
角丸は見せ方や細かな設定がまだまだできますのでリファレンスまた、このジェネレーターなども参考にしてください。
このエントリーをはてなブックマークに追加