Know-How-No-Life

ウェブサイトやアプリのデザインにおいて、角丸をつけることはよく行われます。
角丸を実装するために、CSSにおいてborder-radiusプロパティを使用します。
ただし、WebkitとMozのブラウザでは、このプロパティの書き方が異なることがあります。

全体に対して角丸をつける場合は、以下のようなコードを使用します。

  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;

一方、特定の角にだけ角丸をつけたい場合は、以下のようなコードを使用します。

左上に角丸をつける場合：

  border--top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;

右上に角丸をつける場合：

  border--top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;

右下に角丸をつける場合：

  border--bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;

左下に角丸をつける場合：

  border--bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;

以上が、「角丸をつけるCSS」の書き方についての説明です。
WebkitとMozのブラウザで角丸を実装する際には、これらの異なる書き方に注意してください。