DN*BLOG

CSS3 – border-radius

角丸を生成します。
これはとても便利なプロパティだと思います。

-moz-border-radius: 5px;　//Firefox
-webkit-border-radius: 5px;　//Safari

border-radius

border-radiusの例です。Safari、Firefoxで見てください。

CSSソース

.border-radius {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border:1px solid #3366FF;
	padding:12px;
}

border-radiusの数値ですが、詳しくはW3Cのサイトをご覧下さい。
The ‘border-radius’ properties

また、指定部分だけ角丸にする事も可能です。

-moz-border-radius-topleft:5px;　//Firefox
-webkit-border-top-left-radius:5px;　//Safari

border-radius top left

border-radius「top left」の例です。Safari、Firefoxで見てください。

CSSソース

.border-radius {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border:1px solid #339900;
	padding:12px;
}

上記のプロパティは左上のみ角丸にするという指定です。
他には、

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

上記の物があります。

Return to the page