CSSで角丸にするborder-radius - nicepaper @ ウィキ

CSSで角丸にするプロパティ border-radiusについて考えていきます。2015年5月25日現在記事

こんな感じのもの。

border-radiusとは
基本文
ベンダープレフィックスつける？
ベンダープレフィックステスト
ベンダープレフィックス状況

border-radiusとは

その名の通り、枠線の半径を指定するものです。角が丸いと先進的なデザインになりますね。

基本文

HTML部

<div id="box">
</div>

CSS部

#box{
     width: 600px;    
     height: 100px;
     border: 1px solid #000;
     border-radius: 10px;     
}

丸角の半径は10にするという意味です。borderを適当に設定しておかないと見れないのでborderはつけるようにしましょう。

ベンダープレフィックスつける？

border-radiusは比較的メジャーになってきているものの、ベンダープレフィックスを付けるべきなのか、つけなくていいのか記事を見ると悩まされます。そんなわけでテスト

ベンダープレフィックステスト

コードを書いてみる。

HTML部

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<link rel="stylesheet" type="text/css" href="border_radius.css">
</head>

<body>
<div class="box border1"><p>border-radius: 10px;</p>
</div>
<div class="box border2"><p>-o-border-radius: 10px;</p>
</div>
<div class="box border3"><p>-ms-border-radius: 10px;</p>
</div>
<div class="box border4"><p>-moz-border-radius: 10px;</p>
</div>
<div class="box border5"><p>-webkit-border-radius: 10px;</p>
</div>


</body>
</html>

CSS部

@charset "utf-8";
/* CSS Document */
p{
	font-size: 18px;
}
.box{
	margin: 20px auto;
	width: 400px;
	height: 100px;
	border: 1px solid #000000;
	padding-left: 20px;
}
.border1{
	border-radius: 10px;
}
.border2{
	-o-border-radius: 10px;
}
.border3{
	-ms-border-radius: 10px;
}
.border4{
	-moz-border-radius: 10px;
}
.border5{
	-webkit-border-radius: 10px;
}