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

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

角丸ボックス

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

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: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リファレンスに対応状況など詳しい情報が記載されています。

PR

関連記事