CSSで角丸を表現する方法をちょっと詳しく書いてみる

CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案な […]

CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。
この方法を少し詳しく調べてみました。

.radius{
		border-radius: 10px; /* CSS3草案 */
		}
 

ここの10pxとは角丸の半径の大きさとなります。

ただし、現在のところはCSS3はまだ草案なので、
Safari、Google Chrome では -webkit-border-radius、
Firefox では -moz-border-radius と指定します。

Safari、Chorme用(-webkit-border-radius)

4辺を一括指定する場合は以下のように書きます。

	.webkit1{
	-webkit-border-radius: 10px; /*一括指定*/
	}
 

4辺を個別に指定する場合は以下のように書きます。

		.webkit2{
		-webkit-border-top-left-radius: 10px;  /*左上*/
		-webkit-border-top-right-radius: 20px;  /*右上*/
		-webkit-border-bottom-right-radius: 30px; /*右下*/
		-webkit-border-bottom-left-radius: 40px; /*左下*/
		}
 

サンプルを見る

Firefox用(-moz-border-radius)

4辺を一括指定する場合は以下のように書きます。

		.moz1{
		-moz-border-radius: 10px; /*一括指定*/
		}
 

4辺を個別に指定する場合は以下のように書きます。

		.moz2{
		-moz-border-radius-topleft: 10px;  /*左上*/
		-moz-border-radius-topright: 20px;  /*右上*/
		-moz-border-radius-bottomright: 30px;  /*右下*/
		-moz-border-radius-bottomleft: 40px; /*左下*/
		}
 

サンプルを見る

IEにも角丸を適用させるためには

htcファイル『curved-corner』を使用します。

Google Codeで、配布されています。
http://code.google.com/p/curved-corner/

上記URLから「border-radius.htc」ファイルをダウンロードして、
適切な階層に配置して、CSSに以下のように記述します。

 .ie{
 	behavior: url(border-radius.htc);/*for IE*/
 }
 

Operaに対応させる

Javascriptか、SVGを利用して対応します。
border-radius.js – JavaScript ライブラリー – HTML5.JP
角丸にするためにライブラリを作ってみる (Opera 用コードの試作) | ヨモツネット

個人的には、Operaのためだけににソースを複雑にはしたくないので、
Operaへの対応は省きました。
また、Opera10.50からは border-radiusに対応するらしいです。

クロスブラウザ用のcss

以上を踏まえてクロスブラウザで角丸を表現するには以下の様に記述します。

.cross{
		-moz-border-radius: 10px;/*for Firefox*/
		-webkit-border-radius: 10px;/*for Safari and chrome*/
		border-radius: 10px;
		behavior: url(border-radius.htc);/*for IE*/
		}

borderのプロパティを変えてみる

border styleを変える

borderプロパティのスタイルを以下の様に変えてみました。

.style1  {
    border: 5px dotted #333;
	}
.style2  {
	border: 5px dashed #333;
	}
.style3  {
	border: 5px solid #333;
	}
.style4  {
	border: 5px double #333;
	}
.style5  {
	border: 5px groove #333;
	}
.style6  {
	border: 5px ridge #333;
	}
.style7  {
	border: 5px inset #333;
	}
.style8  {
	border: 5px outset #333;
	}

サンプルを見る

border の数を変える

borderを1辺だけ、2辺だけにしてみました。
1border
予想通りですが、角丸の部分は表現されません。
サンプルを見る

border の色を変える

各borderの色を変えてみました。

color-cange

角丸の中間で色が切り替わります。

円を表現

コンテンツの縦と横のサイズを同じにし、
そのサイズ÷2の大きさで角丸を表現すれば正円を表現できます。

border-radiusで円を表現

角丸の指定を50%にする方法もあります。

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

サンプルを見る

Add Comment

本文

コメントはまだありません。

PAGE TOP