1. ホーム /
  2. CSS /
  3. border-radius（角丸）の使用例

border-radius（角丸）の使用例

以前は個別に画像で作成したり、backgroundでベース画像を設定していた『ボタン風リンク』をCSS3で作る方法です。
今回は、border-radiusのみを使い、フラットな角丸ベースを作ってみます。

CSS


.kadomaru {
  width:200px;	/* ボックス範囲 */
  background:#136ac1;	/* 背景色 */
  border-radius:10px;	/* 角丸（半径10px、すべての角に） */
  color:#fff;		/* テキストカラー */
  line-height:46px;	/* 行間46px（≒ボックスの高さ） */
  text-align:center;	/* テキスト中央寄せ */
}

上記CSSスタイルをあてた状態

リンクテキスト

使いようによっては、コンテンツにつけるタブのデザインもOKです。

タブ

この場合は、border-radiusの数値を下記のように設定します。


border-radius:10px 10px 0 0;

数値は細かく指定できますが、混乱するかもしれないのでここでは触れません。
興味のある方は下記サイトを参考にしてみてください。