HTML5 CSS3

CSSで円形を作りたい時や、ボックスの角を丸めたい時

CSSで円形を作るには、border-radiusプロパティを使用します。border-radiusプロパティは、四角形の角を丸めたり、楕円形を作ったりすることができます。

以下は、border-radiusプロパティを使用して円形を作る例です。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 半径を50%に設定 */
  background-color: red;
}

上記の例では、幅と高さを同じにして、border-radiusプロパティに半径を50%に設定しています。これにより、正確に円形が作成されます。

もし、他の要素に円形を適用したい場合は、その要素に適用したいクラス名を.circleの代わりに使用します。

<div class="circle">This is a circle.</div>

このようにすることで、div要素が円形になります。

border-radiusプロパティには4つの値を指定して、四角形の各角を独立して丸めることもできます。たとえば、以下のように指定すると、左上と右下の角を半径10pxで丸め、左下と右上の角を半径20pxで丸めます。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 10px 20px 10px 20px; /* 左上、右上、右下、左下 */
  background-color: red;
}

以上が、CSSで円形を作る方法です。

-HTML5 CSS3