角丸をつけるCSS

投稿日: 2011/11/13  更新日: 2023/05/02

CSS 


ウェブサイトやアプリのデザインにおいて、角丸をつけることはよく行われます。
角丸を実装するために、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のブラウザで角丸を実装する際には、これらの異なる書き方に注意してください。


このエントリーをはてなブックマークに追加     

profile
profile

洋ちゃん

@c5apple

システムエンジニアをしています。二児の父です。

夢は天井から床までビッシリ並んだ本棚のある書斎を作ること!