【CSS初心者向け!】角を丸くする方法をコードを交えて詳しく解説


【CSS初心者向け!】角を丸くする方法をコードを交えて詳しく解説

CSSでWebページのデザインを作成する際に、基本となるのが「ボックスを並べる」という考え方ですね。divタグやpタグで囲ったボックスの、角を丸くすることができるのをご存知でしたか?角の丸いボックスを効果的に使うことで、ページ全体の印象も変えることができますよ。

今回は、CSSの初心者向けに、ボックスの角を丸くする方法を、図を交えて詳しく解説します! image

目次
  1. ボックスの角を丸くする理由・必要性は?
  2. CSSで角を丸くする border-radiusとは?
  3. 構文
  4. 指定可能な値
  5. 実践!角を丸くする方法
  6. 例1 一括で指定
  7. 例2 個別に指定
  8. 例3 縦と横の半径で指定
  9. Tips (ステップアップの小ワザ)
  10. 画像にも使えます
  11. IE8以前には対応していません
  12. まとめ

ボックスの角を丸くする理由・必要性は?

サンプルで作成したこちらのWebサイトを見てください。なんだか硬い印象を受けませんか? image 一部を角を丸くする効果を使って修正してみます。すると・・・ image さきほどより、優しくとっつきやすい印象に変わりましたね。

このように、boxの角を丸くする効果を使うことで、四角いboxが連続しているWebサイトよりも、全体に優しい印象や柔らかな印象を与えることができます。この角を丸くするために使うプロパティが、border-radiusです。

 

CSSで角を丸くする border-radiusとは?

border-radiusとは、角の丸みの半径を数値で指定するプロパティです。この数値が大きいほどboxが丸に近づき、数値が小さいと四角に近づきます。

構文

border-radius { 数値 ; }
border-radius { 数値/数値 ; }

指定可能な値

border-radiusの指定は、下図の1,2,3,4それぞれに行うことができます。 image

  1. 一括指定
    例)border-radius 10px;
    数値を1つだけ記載すると、1,2,3,4全ての角を同じ丸みにします。
  2. 個別指定
    image 例) border-radius 10px 25px 10px 25px;
    例) border-radius 10px 25px;
    例) border-radius 10px 25px 10px;
    4つ全て別、「1と3、2と4」の2つ、「1、2と4、3」の3つの方法で指定できます。
  3. 縦と横の半径で指定
    image 例)border-radius 10px/20px;
    縦と横の半径を指定して角を丸めます。楕円形のように角を丸くすることができます。

実践!角を丸くする方法

例1 一括で指定

サンプルコード

/* CSSファイルに記載します */
.box1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px; /* 角を丸くする */
}
<!-- HTMLファイルに記載します -->
<div class="box1">
一括で半径10pxを指定して丸めています</br>
四隅に丸みのあるボックスです。
</div>

結果

一括で半径10pxを指定して丸めています。
四隅に丸みのあるボックスです。

例2 個別に指定

サンプルコード

/* CSSファイルに記載します */
.box2_1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px 30px 40px; /* 角を丸くする */
}
.box2_2 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px 30px; /* 角を丸くする */
}
<!-- HTMLファイルに記載します -->
<div class="box2_1">
左上から時計回りに10px,20px,30px,40pxを</br>
指定して丸めています。
</div>
</br>
<div class="box2_2">
数値を3つ指定しました。
</div>

結果

左上から時計回りに10px,20px,30px,40pxを指定して丸めています。

 

数値を3つ指定しました。

例3 縦と横の半径で指定

サンプルコード

/* CSSファイルに記載します */
.box3_1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px/20px ; /* 角を丸くする */
}
.box3_2 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px /10px 25px 30px 20px ; /* 角を丸くする */
}
<!-- HTMLファイルに記載します -->
<div class="box3_1">
縦の半径を10px,横の半径を20pxに指定しました。
</div>
</br>
<div class="box3_2">
応用として、縦横の半径を個別に指定することもできます。
</div>

結果

縦の半径を10px,横の半径を20pxに指定しました。

 

応用として、縦横の半径を個別に指定することもできます。

Tips (ステップアップの小ワザ)

画像にも使えます

border-radiusプロパティは、border(罫線)という名称ですが、線ではなくボックス自体を丸くしています。このため、線のないボックスを丸めることや、imgタグに設定し、サンプルのように画像の角を丸くすることもできます。

/* CSSファイルに記載します */
.box4 {
    border-radius: 40px/60px ; 
}

<!-- HTMLファイルに記載します -->

<img class="box4" src="cd.jpg">

結果

IE8以前には対応していません

border-radiusはCSS3で対応されたプロパティのため、IE8などの旧ブラウザでは対応していないものがあります。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

border-radiusが登場する以前は、角の丸いボックスを表現するためにわざわざ画像を使ったりしていました。それがわずかCSSの一行で実現できるようになったので、作成する側からはとても楽になり嬉しいことですね。使えると便利なborder-radiusで、Webサイトに遊び心を加えてくださいね。 image


のりぴよ
この記事を書いた人
のりぴよ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp