CSS3のborder-radiusを使って様々な角丸ボックスを作ってみる

2013/02/21
- HTML&CSS

CSS3のborder-radiusプロパティを使うと簡単に角丸ボックスにすることができます。試しに色々やってみました。

角丸ボックス

border-radiusプロパティの指定方法は次の通りです。

　
/* 上下左右、半径10ピクセルの角丸 */
border-radius:10px; &nbsp;
　
/* 左上と右下が10px、右上と左下が5px */
border-radius:10px 5px; 
　
/* 左上10px、右上と左下が5px、右下30px */
border-radius:10px 5px 30px; 
　
/* 左上10px、右上5px、右下30px、左下15px */
border-radius:10px 5px 30px 15px;

border-radius:5px;
background-color:#ccc;

border-radius:10px;
background-color:#ccc;

border-radius:20px;
border:1px dotted #333;
background-color:#ccc;

border-radius:10px;
border:5px solid #666;
background-color:#ccc;

楕円の角丸ボックス

角丸を楕円にすることもできます。指定の方法は簡単で横方向の半径と縦方向の半径を「/（スラッシュ）」で区切ります。指定順に関しては上の方法と同じです。

　
border-radius: 横方向の半径  /  縦方向の半径 ;

border-radius:30px 10px 30px 10px / 30px 10px 30px 10px;
border:10px solid #666;
background-color:#ccc;

border-radius:30px 10px 30px 10px / 30px 10px 30px 10px;
border:10px solid #666;
background-image:url(http://www.web-labo.jp/wp-content/uploads/2013/02/2013-02-09ipadmini1.jpg);

border-radius:30px 3px 30px 15px / 50px 3px 50px 15px;
border:10px solid #666;
background-color:#ccc;

box-shadow:#ccc 12px 12px 3px 3px;
border-radius:30px 10px 30px 10px / 30px 10px 30px 10px;
border:10px solid #666;
background-color:#ccc;

但し、実際に使用する場合、ブラウザのバーションによっては対応していないものもありますので注意が必要です。 HTMLクイックリファレンスのCSS3リファレンスに対応状況など詳しい情報が記載されています。