CSS 圆角

CSS 圆角

CSSを通じて border-radius 属性を実現し、どんな要素にも「角丸」スタイルを加えることができます。

CSS border-radius 属性

CSS border-radius 属性は要素の角の半径を定義します。

ヒント：この属性を使用して要素に角丸を追加できます！

ここに三つの例があります：

1. 指定された背景色を持つ要素の角丸：

角丸！

2. 枠を持つ要素の角丸：

角丸！

3. 背景画像を持つ要素の角丸：

角丸！

これはコードです：

例

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

実際に試してみてください

ヒント：border-radius 属性は以下の属性のショートカット属性です：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - 各角の指定

border-radius 属性は一から四つの値を受け入れます。ルールは以下の通りです：

四つの値 - border-radius: 15px 50px 30px 5px;（それぞれ左上角、右上角、右下角、左下角に順に使用されます）：

三つの値 - border-radius: 15px 50px 30px;（最初の値は左上角に使用され、次の値は右上角と左下角に使用され、最後の値は右下角に使用されます）：

二つの値 - border-radius: 15px 50px;（最初の値は左上角と右下角に使用され、次の値は右上角と左下角に使用されます）：

一つの値 - border-radius: 15px;（この値はすべての四个角に使用され、角丸はすべて同じです）：

これはコードです：

例

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

実際に試してみてください

円角のエリプスも作成できます：

例

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

実際に試してみてください

CSSの角丸属性

属性 説明
border-radius すべての四个 border-*-*-radius 属性を設定するショートカット属性です。
border-top-left-radius 左上角のボーダーの形状を定義します。
border-top-right-radius 右上角のボーダーの形状を定義します。
border-bottom-right-radius 右下角のボーダーの形状を定義します。
border-bottom-left-radius 左下角のボーダーの形状を定義します。