CSSのborder-radiusで角丸に表示する方法(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
画像を使わずにCSSだけで角を丸くした例
画像を使わずにCSSだけで角を丸くした例
CSSだけで簡単に角丸が作れるborder-radiusプロパティを使って角を丸くした表示例
CSSだけで簡単に角丸が作れるborder-radiusプロパティを使って角を丸くした表示例
角丸の半径は、ピクセル数や割合などで指定可能
角丸の半径は、ピクセル数や割合などで指定可能
点線で引かれた枠線でも、border-radiusプロパティを使えばその線種のままで角丸にできる
点線で引かれた枠線でも、border-radiusプロパティを使えばその線種のままで角丸にできる
背景色で塗りつぶされたボックスでも、border-radiusプロパティを使えば角を丸くできる
背景色で塗りつぶされたボックスでも、border-radiusプロパティを使えば角を丸くできる
img要素で掲載した画像の四隅も、border-radiusプロパティで角丸にできる
img要素で掲載した画像の四隅も、border-radiusプロパティで角丸にできる
四隅(左上→右上→右下→左下)の角を個別の半径で丸くすることもできる
四隅(左上→右上→右下→左下)の角を個別の半径で丸くすることもできる
ボックスの上側(左上角+右上角)だけを角丸にしてタブを作ったり、ボックスの下側(左下角+右下角)だけを角丸にしてタブを作ったりできる
ボックスの上側(左上角+右上角)だけを角丸にしてタブを作ったり、ボックスの下側(左下角+右下角)だけを角丸にしてタブを作ったりできる
ボックスの対角だけを丸くするようなデザインも簡単に作れる
ボックスの対角だけを丸くするようなデザインも簡単に作れる
角丸ボタンを作成した表示例
角丸ボタンを作成した表示例
連結ボタンの端だけを角丸にすることもできる
連結ボタンの端だけを角丸にすることもできる
この写真の記事を読む
画像を使わずにCSSだけで角を丸くした例
CSSだけで簡単に角丸が作れるborder-radiusプロパティを使って角を丸くした表示例
角丸の半径は、ピクセル数や割合などで指定可能
点線で引かれた枠線でも、border-radiusプロパティを使えばその線種のままで角丸にできる
背景色で塗りつぶされたボックスでも、border-radiusプロパティを使えば角を丸くできる
img要素で掲載した画像の四隅も、border-radiusプロパティで角丸にできる
四隅(左上→右上→右下→左下)の角を個別の半径で丸くすることもできる
ボックスの上側(左上角+右上角)だけを角丸にしてタブを作ったり、ボックスの下側(左下角+右下角)だけを角丸にしてタブを作ったりできる
ボックスの対角だけを丸くするようなデザインも簡単に作れる
角丸ボタンを作成した表示例
連結ボタンの端だけを角丸にすることもできる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます