スタイルシートで角を丸くする

  • 投稿日:
  • カテゴリ:

スタイルシートでborder-radiusを指定すると、角が丸くなります。先端恐怖症ってわけではありませんが、丸いとやわらかい印象となります。タイトル背景、領域の堺目や画像の角も丸くできます。
screenshot_m111.png
CSS3で登場したということですが、2011年ころにIE9が対応したということなので、結構経ちますね。

企業のサイトを眺めると、大きいパーツは大きく丸くなっていますが、いろいろな小さなパーツも実はborder-radiusを使って丸くなっています。たった3pxとか4pxとかで、意識しなければわからないかもしれませんが、なんとなくのレベルでやさしい印象に貢献しています。

以前は、画像を加工して、角を丸くしていたものをタイトル背景に使うなどと手間がありました。スタイルシートで指定できると、サイトのページ上のすべてを一括して自動化することが可能です。

昔から角が丸いといえば、マックのアプリのウインドウ、ボタン類ですが、ウェブページも気づけば進化していたのですね。

リンクソース

  • 記事用リンクソース:
  • Wiki用リンクソース(PukiWiki):
  • Wiki用リンクソース(MediaWiki):
  • SNS投稿用: