CSS の角の丸い枠線を設定する方法

2年 ago
桜, 春樹
1 minute

CSSで丸く角を付けるには、border-radiusプロパティを使用します。このプロパティは、角の丸み具合を制御します。

角丸の境界を設定する方法は次のとおりです。

  1. コーナーの丸み
.border {
border-radius: 10px;
}

これにより、.border 要素の 4 つの角すべてに、半径 10 ピクセルの丸い角が付与されます。

  1. 左上の角の丸み
  2. 右上角にボーダー半径を
  3. 左下角の境界の半径
  4. 右下の角を丸く
.border {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}

.border 要素の左上、右上、左下、右下がそれぞれ半径 10px、20px、30px、40px の丸みを持つようになります。

  1. コーナーの半径
.border {
border-radius: 10px 20px;
}

border要素の左上と右下には半径10ピクセルの丸み、右上と左下には半径20ピクセルの丸みがつく

  1. ボーダー半径
.border {
border-radius: 50%;
}

それにより、.border 要素の4 つの角が丸みを帯びた楕円形になります。

border-radius 属性は、border-width、border-color、border-style など、他の境界関連の属性と組み合わせて、より複雑な境界効果を作成できることに注意してください。

bannerAds