”みんなのｅＰｕｂ”で電子書籍に詳しくなろう！

【CSS3の知識①border-radius:角丸の半径】

半径を指定してボックスの角を丸くするプロパティです｡半径を横方向と縦方向に分けて指定すると､角を楕円にすることもできます｡

  • SAMPLE-A：「角を丸くする」

    太さ8ピクセルのオレンジ色の罫線で囲んだボックスに｢border-radius: 20px｣と指定すると､右のように4つの角が丸くなります｡
    このとき､ 20ピクセルの半径になるのは罫線の外側のエッジで､内側のエッジは罫線の太さを引いた12ピクセルの半径になります｡
    css_radius_11
    角の半径と罫線の太さが同じ､もしくは罫線の方が太い場合､罫線の内側のエッジは丸くなりません｡
    css_radius_12
    border: solid 20px orange;
    border-radius: 20px;
    と指定したときの表示｡
    css_radius_13
    border: solid 25px orange;
    border-radius: 20px;
    と指定したときの表示｡
    *

    HAM SANDWICHES

    Firefox 3.6にも対応する場合には､プロパティ名を｢-moz-border-radius｣とした設定も追加します｡

  • SAMPLE-B：「楕円の角丸」

    横方向と縦方向の半径を個別に指定した場合､角を楕円にすることができます｡
    ここでは横を40ピクセル､縦を20ピクセルに指定しています｡
    border-radius:横方向の半径/縦方向の半径見出しをオレンジ色の角丸の罫線で囲んだもの｡
    css_radius_14

    HAM SANDWICHES

  • SAMPLE-C：「角ごとに丸みを変える」

    border-radiusでは下の記述形式を利用して角ごとに異なる半径を指定することができます｡

    border-*-radius: [角丸の半径];
     (注)：*は、「top-left / top-right / bottom-right / bottom-left」

    たとえば､ border-radius:20px 40px 60px 80px:と指定すると､左上の角から順に時計回りで半径が大きくなります｡
    なお､角ごとの半径はborder-radiusに角の情報を付加したプロパティで指定することもできます｡

    HAM SANDWICHES

  • SAMPLE-D：「背景や文字のカット」

    border-radiusを指定した場合､背景の角も丸くなります｡
    たとえば､下のサンプルではオレンジ色の背景を角丸にしています｡また､前景の文字や画像が角丸と重なる場合､overflowを｢hidden｣と指定すれば角丸でカットすることができます｡

    padding: 0;と指定し､文字を角丸に重ねて表示したもの｡
    css_radius_15-1

    overflow:hidden;と指定し､角丸で文字をカットしたもの｡
    css_radius_15-2

    HAM SANDWICHES

    焼きたての手作りのパンで新鮮なハム､トマト､チーズ､レタスを挟んだサンドイッチです｡マスタードをピリッときかせたマヨネーズソースがおいしくて､お店の近くを通るたびに買いこんでしまいます｡

  • SAMPLE-E：「テーブルの角丸」

    border-radiusはテーブルに指定することもできます。
    たとえば､テーブルで組んだカレンダーの各セルを罫線で囲み､border-radiusを指定すると右のようになります｡ただし､border-collapseでテーブルの罫線を重ねて表示している場合､ border-radiusの指定は無視され､角は丸くなりません｡
    css_radius_15
    td,th{
      border: solid 1px;
      border-radius: 15px;
      ...
    }

ページの先頭へ