【ホームページ作成】画像を使わずにCSSだけで角を丸くする方法

特定の角だけを丸くする方法

次に、ボックスの四隅すべてではなく、特定の角だけを対象にして丸くする書き方をご紹介いたします。 この記述方法なら、「左上角と右上角だけを丸くして『タブ』のように見せる」デザインなどが作れます。

先ほどと同様に、各ブラウザの独自拡張では、プロパティ名の先頭に「-moz-」や「-webkit-」を加えて記述します。 しかし、Firefoxの場合は、CSS3のプロパティ名とは少し異なるので注意して下さい。

それぞれの角を個別に丸くする記述方法は下記の通りです。

CSS3：

border-top-left-radius: 20px;     /* 左上 */
border-top-right-radius: 20px;    /* 右上 */
border-bottom-left-radius: 20px;  /* 左下 */
border-bottom-right-radius: 20px; /* 右下 */

Safari、Google Chrome：

-webkit-border-top-left-radius: 20px;     /* 左上 */
-webkit-border-top-right-radius: 20px;    /* 右上 */
-webkit-border-bottom-left-radius: 20px;  /* 左下 */
-webkit-border-bottom-right-radius: 20px; /* 右下 */

Firefox： （※名称が上記2つとは少し異なるので注意）

-moz-border-radius-topleft: 20px;     /* 左上 */
-moz-border-radius-topright: 20px;    /* 右上 */
-moz-border-radius-bottomleft: 20px;  /* 左下 */
-moz-border-radius-bottomright: 20px; /* 右下 */

先ほどと同様に、まとめて同時に記述しても問題はありません。
例えば、上側だけ（左上と右上だけ）を丸く表示させるには、下記のように書けばよいでしょう。

div.kadomaru {
   /* ▼CSS3 */
   border-top-left-radius: 20px;  /* 左上 */
   border-top-right-radius: 20px; /* 右上 */

   /* ▼Safari,Chrome */
   -webkit-border-top-left-radius: 20px;  /* 左上 */
   -webkit-border-top-right-radius: 20px; /* 右上 */

   /* ▼Firefox */
   -moz-border-radius-topleft: 20px;  /* 左上 */
   -moz-border-radius-topright: 20px; /* 右上 */

   /* ▼共通装飾 */
   border: 3px green solid;     /* 枠線の装飾 */
   background-color: #ccffcc;   /* 背景色 */
}

上記のスタイルシートを前ページで使ったHTMLに適用させると、下図の上側のように表示されます。（Google Chromeでの表示例）

上図の下側は、ボックス内の背景色を枠線と同色（green）にした場合の表示です。
また、「右上」（border-top-right-radius）と「左下」（border-bottom-left-radius）だけを丸くすると、下図のように見えます。（Safariでの表示例）

このようなデザインも簡単に作れます。 上図のCSSソースは、下記の通りです。

div.kadomaru {
   /* ▼CSS3 */
   border-top-right-radius: 20px;   /* 右上 */
   border-bottom-left-radius: 20px; /* 左下 */

   /* ▼Safari,Chrome */
   -webkit-border-top-right-radius: 20px;   /* 右上 */
   -webkit-border-bottom-left-radius: 20px; /* 左下 */

   /* ▼Firefox */
   -moz-border-radius-topright: 20px;   /* 右上 */
   -moz-border-radius-bottomleft: 20px; /* 左下 */

   /* ▼共通装飾 */
   border: 3px green solid;     /* 枠線の装飾 */
   background-color: #ccffcc;   /* 背景色 */
}

おわりに

今回は、画像を用意することなく、スタイルシートだけでボックスの角を丸く表示させる方法をご紹介いたしました。 IEでは（最新のIE8でも）角丸にはなりませんが、将来的に（CSS3の記述方法で）表示できるようになるでしょう。

●画像と配置を駆使して角丸デザインを作るのが面倒
●できれば角丸で表示したいが、無理なら四角でもよい

……という場合には、画像を使わずに「スタイルシートでシンプルに角丸を実現する」方法を採用してみてはいかがでしょうか。 ぜひ、ご活用下さい。

なお、画像を駆使して角丸を実現する方法は、下記の関連記事などをご参照下さい。