WEB帳
CSSを使って角を丸くする

border-radiusを使用して角を簡単に丸く出来るstyleタグです。
４つ角を一つずつ指定することも可能な様です。

CSS

.sample{
	/* 角を10px丸くする */
	border-radius: 10px;
	/* Safari,Google Chrome用 */
	-webkit-border-radius: 10px;
	/* Firefox用 */
	-moz-border-radius: 10px;
	/* ボーダー */
	border:1px solid #CCCCCC;
	/* 中央寄せ */
	text-align:center;
}  

HTML

<div class="sample">
	CSSを使って角を丸くする<br />サンプル表示
</div>

サンプル

角丸を指定する

それぞれのコーナーの角丸を個別に指定するも出来るようです。

css

.sample{
	/* 左上 */
	border-top-left-radius:10px;
	-webkit-border-top-left-radius:10px; 
	-moz-border-radius-topleft:10px;
	/* 右上 */
	border-top-right-radius:10px;
	-webkit-border-top-right-radius:10px; 
	-moz-border-radius-topright:10px;
	/* 左下 */
	border-bottom-left-radius:10px;
	-webkit-border-bottom-left-radius:10px; 
	-moz-border-radius-bottomleft:10px;
	/* 右下 */
	border-bottom-right-radius:10px;
	-webkit-border-bottom-right-radius:10px; 
	-moz-border-radius-bottomright:10px;
}

【参考Webサイト】

• CSS3 角丸を表現する border-radius
• border-radius

コメント（0件）

CSSを使って角を丸くするに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet