CSS3新要素 | 背景・ボーダー | border-radius

概要

css3の角丸を指定するborder-radiusについて説明します

プロパティ名

プロパティ名	設定内容
border-radius	四つ角全ての角丸を設定
border-top-left-radius	左上の角丸を設定
border-top-right-radius	右上の角丸を設定
border-bottom-left-radius	左下の角丸を設定
border-bottom-right-radius	右下の角丸を設定

内容

各角の角丸を設定します。

設定値

数値で設定します

注意事項

2012/03/22現在、ベンダープリフィックスをつけないと動作しなません
例

  /* webkit系 */
  -webkit-border-radius:50px;
  /* mozilla系 */
  -moz-border-radius:50px;
  /* opera */
  -o-border-radius:50px;
  /* microsoft系 */
  -ms-border-radius:50px;

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>background_size</title>
    <style type="text/css">
    p {
      background-color:gray;
      width:300px;
      height:100px;
      padding:25px;
    }
    p#contents1 {
      border-radius:50px;
      -webkit-border-radius:50px;
      -moz-border-radius:50px;
      -o-border-radius:50px;
      -ms-border-radius:50px;
    }
    p#contents2 {
      border-top-left-radius:50px;
      -webkit-border-top-left-radius:50px;
      -moz-border-top-left-radius:50px;
      -o-border-top-left-radius:50px;
      -ms-border-top-left-radius:50px;
    }
    p#contents3 {
      border-top-right-radius:50px;
      -webkit-border-top-right-radius:50px;
      -moz-border-top-right-radius:50px;
      -o-border-top-right-radius:50px;
      -ms-border-top-right-radius:50px;
    }
    p#contents4 {
      border-bottom-left-radius:50px;
      -webkit-border-bottom-left-radius:50px;
      -moz-border-bottom-left-radius:50px;
      -o-border-bottom-left-radius:50px;
      -ms-border-bottom-left-radius:50px;
    }
    p#contents5 {
      border-bottom-right-radius:50px;
      -webkit-border-bottom-right-radius:50px;
      -moz-border-bottom-right-radius:50px;
      -o-border-bottom-right-radius:50px;
      -ms-border-bottom-right-radius:50px;
    }
    </style>
  </head>
  <body>
    <p id="contents1">四つ角丸</p>
    <p id="contents2">左上角丸</p>
    <p id="contents3">右上角丸</p>
    <p id="contents4">左下角丸</p>
    <p id="contents5">右下角丸</p>
  </body>
</html>