CSSで角丸のデザインを作成する方法

1. border-radiusプロパティを使用する方法: border-radiusプロパティは、要素の角を丸くするために使用されます。以下は使用例です。

<style>
  .rounded-box {
    border-radius: 10px;
  }
</style>
<div class="rounded-box">
  これは角丸のボックスです。
</div>

2. 特定の角のみを丸くする方法: border-radiusプロパティは、個々の角に異なる値を指定することもできます。以下は使用例です。

<style>
  .rounded-box {
    border-radius: 10px 0 0 10px;
  }
</style>
<div class="rounded-box">
  これは左上と左下が丸いボックスです。
</div>

3. 円形の要素を作成する方法: border-radiusプロパティに非常に大きな値を指定することで、要素全体を円形にすることもできます。以下は使用例です。

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
  }
</style>
<div class="circle"></div>

これらは、CSSを使用して角丸のデザインを作成する一般的な方法のいくつかです。デザインの要件や好みに応じて、適切な方法を選択してください。