CSSで角を丸くするborder-radiusの使い方

CSS3のborder-radiusプロパティを使用すると、今までは画像でしか表現できなかった丸角が簡単に作れるようになりました。

今回はこの「border-radiusプロパティ」の仕様と使い方を紹介します。

border-radiusの使い方
  1. border-radiusの仕様と使い方
  2. border-radiusを使ったサンプル

border-radiusの仕様と使い方

border-radiusの仕様として以下のように指定を行うと、半径xの円に従い丸みをつけます。

border-radius:半径;

このように角部分が指定した半径の円に沿って丸くなるイメージです。

radius1

実際にやってみるとこのようになります。

<div style="border-radius:100px; border:1px solid #aaa; width:400px; height:250px;">
</div> 
border-radiusの指定方法

border-radiusは大きく分けて3つの指定方法があります。

上記で記載したように、4つの角を同じように丸くする指定方法

border-radius:半径;

4つの角を個別に指定するする方法

border-radius:[左上]半径 [右上]半径 [右下]半径 [左下]半径;

楕円を指定する方法

border-radius:半径x / 半径y;

楕円のしてはこのように、x軸とy軸の長さをそれぞれ指定します。

radius2

実際にやってみるとこのようになります。

<div style="border-radius:100px / 50px; border:1px solid #aaa; width:400px; height:250px;">
</div> 

4つ角の指定方法を合わせて、このように歪な形の角丸のボックスを作成することの出来ます。

<div style="border-radius:100px 150px 200px 100px/ 50px 150px 50px 100px; border:1px solid #aaa; width:400px; height:250px;">
</div> 

この場合は、以下のような指定となります。

左上の角x:100px,y:50px
右上の角x:150px, y:150px
右下の角x:200px, y:50px
左下の角x:100px, y:100px

border-radiusを使ったサンプル

border-radiusを使ったサンプルをいくつか紹介します。

丸い枠の画像
camera-541213_1280
HTML
<div style="width:200px; height:200px; border-radius:100px; overflow:hidden; border:1px solid #ccc">
    <img src="×××.jpg" style="width:300px; height:300px;" />
</div>
フキダシ
<div class="heading"></div>
CSS
.heading{
	position:relative;
	padding:9px;
	font-weight: bold;
	font-size: 18px;
	background-color: #51A2C1;
	color: #fff;
	border-radius:3px;
	width:300px;
	height:30px;
}

.heading:before{
	content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:13px transparent solid; 
	border-right-width:0; 
	border-left-color:#51A2C1; 
	position:absolute; 
	top:40px; 
	left:30px;
	transform:rotate(-270deg);
	-webkit-transform:rotate(-270deg);
	-moz-transform:rotate(-270deg);
	-o-transform:rotate(-270deg);
	-ms-transform:rotate(-270deg);
}
CSSアイコン

HTML
<span class="icon icon1"></span>
CSS
/* iconの共通CSS */
.icon{
    display:inline-block; 
    position:relative;
    background: #999;
    border-radius:90px;
    width:90px;
    height:90px;
    margin:5px;
}
.icon:hover{
    opacity: 0.8;
}

/* ライト */
.icon1:before{
    content:''; 
    display:block; 
    position:absolute; 
    top:20px; 
    left:30px; 
    border-radius:30px;
    height:30px; 
    width:30px; 
    background-color:#fff;
}
.icon1:after{
    content:''; 
    display:block; 
    position:absolute; 
    top:56px; 
    left:37px; 
    height:5px; 
    width:16px;
    border-top:4px solid #fff;
    border-bottom:4px solid #fff;
}

アイコンは他にもいくつか作成したのでこちらを参照

divider

Trackback URL

http://webnonotes.com/css/border-radius/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>