問題
border-radiusを細かく設定するには？
解決策
- 各辺を設定 … 「border-radius: 左上 右上 右下 左下;」
- 各辺をさらに細かく設定 … 「border-radius: 左上の横 右上の横 右下の横 左下の横 / 左上の縦 右上の縦 右下の縦 左下の横;」
- 楕円 … 「border-radius: 50%;」
- 正円 … 「border-radius: 50%;」＋幅と高さを同じにする。
border-radiusの設定メモ
時代が進み、border-radiusもほぼ問題なく使えるようになってきました。
なので細かく設定しようとした際の指定の順番等を忘れてもいいように、設定情報を残しておこうと思います。
各辺を設定する。
各辺を設定するには、左上 → 右上 → 右下 → 左下の順に設定を行います。
DEMOはこちら（※例として、クラス名を「radius01」と設定）
各辺を設定
HTML
<div class="radius01">
<p class="text">各辺を設定</p>
</div>CSS
.radius01{
padding: 40px;
font-weight: bold;
text-align: center;
background-color: #FCECE8;
border-radius: 15px 20px 30px 50px; /* 左上 右上 右下 左下 */
}各辺をさらに細かく設定する。
各辺をさらに横、縦それぞれ設定するには、横「左上 → 右上 → 右下 → 左下」 → 縦「左上 → 右上 → 右下 → 左下」の順に設定を行います。
DEMOはこちら（※例として、クラス名を「radius02」と設定）
各辺をさらに細かく設定
HTML
<div class="radius02">
<p class="text">各辺をさらに細かく設定</p>
</div>CSS
.radius02{
padding: 40px;
font-weight: bold;
text-align: center;
background-color: #FCECE8;
border-radius: 15px 20px 30px 50px / 50px 50px 30px 5px;
/* 左上の横 右上の横 右下の横 左下の横 / 左上の縦 右上の縦 右下の縦 左下の横 */
}楕円に設定する。
楕円に設定するには、全辺に50%を指定します。
DEMOはこちら（※例として、クラス名を「radius03」と設定）
楕円に設定
HTML
<div class="radius03">
<p class="text">楕円に設定</p>
</div>CSS
.radius03{
padding: 40px;
font-weight: bold;
text-align: center;
background-color: #FCECE8;
border-radius: 50%;
}正円に設定する。
正円に設定するには、全辺に50%を指定した上で、幅（width）と高さ（height）を同じ数値に設定します。
DEMOはこちら（※例として、クラス名を「radius04」と設定）
正円に設定
HTML
<div class="radius04">
<p class="text">正円に設定</p>
</div>CSS
.radius04{
/* 幅と高さを同じ数値にする */
width: 200px;
height: 200px;
padding: 40px;
font-weight: bold;
text-align: center;
background-color: #FCECE8;
border-radius: 50%;
}参考
【今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/border-radius
コメント