角を丸くする border-radius
border-radius
borderの角の処理で矩形を角丸にできる
Firefox3.6では全く効きません。Firefox4.0は微妙にボーダーにラインが入るようです。safari5.05、Chrome11は少し描画がおかしいようです。IE8以下は全く効きません。IE9ではうまくいくようです。Opera11.10は画像が丸くならず、ボーダーも少しおかしいようです。
HTMLファイルを作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>border-radius</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
section h1,section img{
border:1px solid #000000;
}
</style>
</head>
<body>
<section>
<h1>border-radiusを使わない</h1>
<p><img src="images/mydog.jpg" alt="mydog"></p>
</section>
</body>
</html>
h1要素とp要素にCSSで1pxの黒のボーダーを設定しています。（わかりよくするためだけでボーダーを設定しないと角丸にならないわけではありません。）
border-radiusを設定
section h1,section img{
border:1px solid #000000;
border-radius:10px;
}
border-radius:10px;10pxのところを変更するだけです。ここはパーセントも指定できます。ボーダーの長さに対してと思われます。
border-radiusの詳細な設定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>border-radius</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
section h1,section img{
border:1px solid #000000;
border-radius:10px;
}
.radius1{
border-radius:10px 20px 30px 40px;
}
.radius2{
border-radius:10px / 50px;
}
.radius3{
border-radius:50%;
}
</style>
</head>
<body>
<section>
<h1>border-radiusを設定</h1>
<p><img src="images/mydog.jpg" alt="mydog"></p>
<p><img src="images/mydog.jpg" alt="mydog" class="radius1"></p>
<p><img src="images/mydog.jpg" alt="mydog" class="radius2"></p>
<p><img src="images/mydog.jpg" alt="mydog" class="radius3"></p>
</section>
</body>
</html>
- 4つの角それぞれに対して角丸度合いを個別に設定できます。
border-radius:10px 20px 30px 40px左上 右上 右下 左下の順です。border-radius:10px / 50px水平方向の角丸径と垂直方向の角丸径です。これも4方向個別に指定できます。- また、個別のプロパティーとして
右上border-top-right-radius
右下border-bottom-right-radius
左下border-bottom-left-radius
左上border-top-left-radius
があります。水平方向と垂直方向一括指定もしくは個別指定ができます。border-top-left-radius: 55pt 25pt - 元画像が正方形なので
border-radius:50%とすれば丸く切り取ったようになります。
border-radiusの詳細な設定2
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>border-radius</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.radius1{
border:20px #000000 solid;
border-radius:40px;
}
.radius2{
border:20px #000000 double;
border-right: 20px #ff0000 solid;
border-bottom: 20px #000000 dashed;
border-radius:40px;
}
.radius3{
border:20px #000000 solid;
border-radius:40px;
border-left-color:#ff0000;
border-right-style:none;
}
.radius4{
border:20px #000000 solid;
border-radius:40px;
border-left:10px #ff0000 solid;
border-right:40px #ff0000 solid;
}
</style>
</head>
<body>
<section>
<h1>border-radiusの詳細設定2</h1>
<p class="radius1">HTMLとCSSとJavaScriptとPHP</p>
<p class="radius2">HTMLとCSSとJavaScriptとPHP</p>
<p class="radius3">HTMLとCSSとJavaScriptとPHP</p>
<p class="radius4">HTMLとCSSとJavaScriptとPHP</p>
</section>
</body>
</html>
ボーダーは4方向個別に設定できるので太さや色が違った時の描画を比べてみました。