これは便利!CSSだけで角丸

kidpatrick2009-11-17

CSS3.0ではborder-radiusというプロパティを使えば、今までの苦労が信じられないくらい簡単に角丸ができてしまうらしいということで早速試してみた。(右の画像は実際に試してみた結果です。結構綺麗。)


さて使い方ですが、本当にたったこれだけ。

.box {
  border-radius:4px;
  border:1px solid #000;
}

4隅全部じゃなくて右上、左上だけ丸くしたいという場合は、こんな具合。

.box {
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  border:1px solid #000;
}

ただしIEが駄目っぽい...
便利だけど、使えない。