CSSで角を丸くするには？
画像を丸くしたい
マーカーの先を丸くするには？
CSSで角丸を実装するには、border-radiusプロパティを指定すると簡単にできます。
本記事では、CSSのborder-radiusプロパティで角丸にする方法やサンプルコード、上手くいかない場合の対処法まで紹介します。
CSSで角丸にするには？
CSSで角丸にするには、border-radiusプロパティを使用します。
このプロパティを使えば、画像やボタン、ボックスの角なども丸くできます。
基本的な書き方は、以下の通りです。
| border-radius: 値; |
「値」の部分に角をどれだけ丸くするか、pxや%、emなどで指定します。
次の章で具体的な使用方法について紹介します。
border-radiusの使い方
border-radiusプロパティの使い方を紹介します。
- 正円を作る
- 四隅を均等に角丸にする
- 異なる大きさに角を丸くする
- 楕円形を作る
それぞれ順番に見ていきましょう。
正円を作る
border-radius: 50%; を指定すると、円形が作れます。
上図のように、正円を作る場合は、高さと幅を揃える必要があります。
コピー <div class="circle"></div>
コピー.circle {
width: 150px;
height: 150px;
background-color: #f08080;
border-radius: 50%;
}
一方で、高さを150pxで幅を300pxにして長方形にすると、楕円形が作れます。
正円を作りたいときは正方形、楕円形を作りたいときは長方形を作成してborder-radiusを指定しましょう。
四隅を均等に角丸にする
全ての角を均等に丸くするには、単一の値を指定します。
たとえば、border-radius: 20px;と指定すると、全ての角が20pxの半径で均等に丸くなります。
コピー<div class="box"></div>
コピー.box {
width: 200px;
height: 100px;
background-color: #b2cbe4;
border-radius: 20px;
}
異なる大きさに角を丸くする
それぞれの角を異なる大きさに丸めるには、左上、右上、右下、左下の順に値を指定します。
分けて指定することで、より複雑な形状が実装できます。
コピー<div class="custom-box"></div>
コピー.custom-box {
width: 200px;
height: 100px;
background-color: #f08080;
border-radius: 10px 30px 50px 0;
}
歪んだ形を作る
歪んだおしゃれな形を作るには、四隅に水平方向と垂直方向の丸みを指定します。
コピー<div class="stylish-shape"></div>
コピー.stylish-shape {
width: 250px;
height: 150px;
background-color: #b2cbe4;
border-radius: 160px 130px 210px 150px / 110px 130px 110px 180px;
}
角丸を指定するborder-radius: 160px 130px 210px 150px / 110px 130px 110px 180px;は、前半に水平方向、後半に垂直方向の丸みを指定しています。
それぞれの値は、前章の「異なる大きさに角を丸くする」と同じように左上の角から時計回りに書きます。
四隅を縦と横方向に角の形状を指定することで、非常にユニークで不規則な形も実装可能です。
CSSで角丸を使ったよくあるデザイン例
border-radiusプロパティで角丸を取り入れたデザイン例を紹介します。
- 角丸の画像
- 角が丸いマーカー線
- 楕円形のボタン
それぞれ順番に見ていきましょう。
角丸の画像
コピー<div class="rounded-image">
<img src="/img/corner-sample.jpg" alt="" />
</div>
コピー.rounded-image img {
width: 300px; /* 画像の幅 */
height: auto; /* 自動的に高さを設定 */
border-radius: 50px; /* 角丸の適用 */
box-shadow: 0px 4px 8px rgba(3, 3, 3, 0.3); /* シャドウを追加 */
}
画像の角を丸くするときは、前章で図形を作成したときと同様にborder-radiusプロパティで角の値を指定します。
またbox-shadowで影を追加すると、画像に立体感を持たせることが可能です。
角が丸いマーカー線
コピー<div class="marker-wrapper">
<h2 class="marker-text">角が丸いマーカー線</h2>
</div>
コピー.marker-wrapper {
text-align: center; /* テキストを中央寄せ */
}
.marker-text {
display: inline-block; /* テキストをブロック要素にする */
position: relative; /* 疑似要素の基準となる位置を設定 */
font-size: 36px; /* テキストサイズ */
font-weight: bold; /* テキストを太字に */
color: #333; /* テキストの色 */
}
.marker-text::before {
position: absolute; /* テキストに対して相対的に配置 */
content: ''; /* 擬似要素の内容を空に設定 */
left: 0; /* 左端から配置 */
bottom: 0; /* テキストの下に配置 */
width: 100%; /* テキストの幅いっぱいに広がる */
height: 0.3em; /* マーカー線の高さ */
background-color: #f08080; /* マーカーの色 */
border-radius: 0.15em; /* 角を丸くする */
z-index: -1; /* テキストの背面に表示 */
}
角が丸いマーカー線は、beforeの疑似要素を使って実装しましょう。
疑似要素でテキストの背面に背景色でマーカー線を作り、border-radiusを指定して角を丸くします。
また、マーカー線の値をpxではなくemで指定することで、レスポンシブデザインにも適応するため、細かく調整する必要がありません。
楕円形のボタン
コピー<div class="button-wrapper">
<a href="#" class="button">楕円形のボタン</a>
</div>
コピー.button-wrapper {
text-align: center; /* ボタンを中央揃えに */
margin: 20px;
}
.button {
display: inline-block; /* aタグをインラインブロックにする */
width: 160px; /* ボタンの幅 */
height: 60px; /* ボタンの高さ */
line-height: 60px; /* テキストを中央揃え */
background-color: #f08080; /* ボタンの背景色 */
color: #FFF; /* テキスト色 */
text-align: center; /* テキストを中央揃え */
border-radius: 100vh; /* 楕円形の角丸 */
font-size: 18px; /* テキストサイズ */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
}
楕円形のボタンを作るときは、border-radius: 100vh;を指定するのが良いでしょう。
画面全体の高さに基づいて角を丸められて、レスポンシブデザインにも対応しているため、コードを追記する必要がなくてとても便利です。
ただし、常に使用できるわけではありません。
ボタンの高さが小さすぎるときやデザインカンプでデザインが固定されているときは、見た目が不自然になったり異なったりしてしまいます。
状況に応じて適切に使用することを覚えておきましょう。
CSSで角丸が効かないときの原因と対処法
border-radiusプロパティを指定しても期待した動きをしない場合は、以下の原因が考えられます。
- border-radiusの子要素への非継承
- 特定ブラウザのバグ
それぞれの原因の対処法を紹介します。
border-radiusの子要素への非継承
border-radiusは子要素には継承されないため、親要素に適用しても子要素には反映されません。
親要素にoverflow: hidden;を指定すると、子要素がはみ出さずに角丸が適用されます。
例を見てみましょう。
コピー<div class="parent">
<img class="child" src="/img/corner-sample.jpg" alt="" />
</div>
コピー.parent {
width: 400px;
border: solid 5px #b2cbe4;
border-radius: 30px; /* 角丸の設定 */
}
/* 子要素 */
.child {
width: 400px;
height: auto;
}
上記のコードのように親要素にborder-radiusを指定するだけだと、上図の左のように子要素の画像がはみ出してしまいます。
子要素が親要素からはみ出さないようにするには、親要素であるparentクラスにoverflow: hidden; を指定すると解決します。
特定ブラウザのバグ
Safariを含む一部のブラウザでは、特定の条件下でborder-radiusプロパティが正しく表示されないバグが起こる可能性があります。
overflow: hiddenやoutlineプロパティと組み合わせたときやホバーアニメーションでborder-radiusが消えてしまった事例がありました。
対策としては、角丸が効かない要素に対して、z-indexを指定することです。
値は1を指定するだけで問題ありませんが、他の要素と重なっているときは、重なりを考慮して値を調整しましょう。
CSSの角丸がすぐに実装できるジェネレーター
角丸のジェネレーターを使用すると、図形の角度に悩まずに角丸を作れ、CSSコードも自動生成されて便利です。
視覚的にどのような形になるのか確認しながら作成でき、直感的な操作で角の丸みを調整しながら作れます。
複雑な形状のデザインも即座に作れるため、作業スピードが飛躍的に向上するでしょう。
ジェネレーターはいくつか種類があるため、たくさん触って使い心地を試してみてください。
まとめ：border-radiusの使い方をマスターしよう
border-radiusプロパティの使い方や、効かないときの対処法を理解することで、コーディングの幅が大きく広がります。
画像やボタン、ボックスなどの角を丸くするには、pxや%、emなどの単位で柔軟な指定が可能です。
角丸は一般的なデザインのため、今のうちにしっかりと活用できるようにしておくと良いでしょう。
これからWeb制作の基礎を固め、実務に直結するスキルを身につけたい方には、実践的なカリキュラムが揃ったデイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！