คุณสมบัติ border-radius

คุณสมบัติ border-radius สร้างมุมโค้งมน สำหรับเส้นขอบและพื้นหลัง ค่าของคุณสมบัติ เป็น หน่วย สำหรับขนาด ใดๆ ก็ได้ ค่าเริ่มต้น: 0 เป็นคุณสมบัติแบบย่อสำหรับ border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius

ไวยากรณ์

cssselector {
  border-radius: value;
}

จำนวนของค่า

คุณสมบัติสามารถรับค่าได้ 1, 2, 3 หรือ 4 ค่า โดยระบุ คั่นด้วยช่องว่าง:

ความโค้งมนแบบวงรี

สองค่าคั่นด้วยเครื่องหมายทับกำหนดความโค้งมนแบบวงรี ค่าหน้าทับระบุ ความโค้งมนแนวนอน และค่าหลัง ทับ - ความโค้งมนแนวตั้ง:

cssselector {
  border-radius: horizontal / vertical;
}

หากกำหนดความโค้งมนสำหรับหลายมุม ก่อนทับจะระบุความโค้งมนแนวนอนทั้งหมด และหลังจากนั้น - ความโค้งมนแนวตั้งทั้งหมด

ตัวอย่าง

กำหนดความโค้งมน 10px สำหรับทุกมุม:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

มาดูกันว่าความโค้งมนสำหรับเส้นขอบ แบบจุดหน้าตาเป็นอย่างไร:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

กำหนดความโค้งมนที่ 10px สำหรับมุม ในแนวทแยงหนึ่ง และความโค้งมนที่ 40px - สำหรับ มุมในแนวทแยงที่สอง:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

กำหนดความโค้งมนที่ 10px สำหรับมุมบนซ้าย ความโค้งมนที่ 30px สำหรับ มุมล่างขวา และความโค้งมนที่ 50px - สำหรับมุมในแนวทแยงที่สอง:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

กำหนดความโค้งมนที่ต่างกันสำหรับแต่ละ มุม:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

มาทำความโค้งมนแบบวงรีกัน โดยกำหนด 20px สำหรับส่วนแนวนอน ของความโค้งมน และ 40px - สำหรับส่วนแนวตั้ง:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

และตอนนี้กำหนดความโค้งมนแบบวงรีที่ต่างกัน สำหรับทุกมุมแยกกัน:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

ตัวอย่าง

หากตั้งค่าความโค้งมนสำหรับบล็อกสี่เหลี่ยมจัตุรัส เท่ากับครึ่งหนึ่งของด้านของสี่เหลี่ยมจัตุรัส จะได้ วงกลม:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

ตัวอย่าง

หากตั้งค่าความโค้งมน มากกว่าด้านของ สี่เหลี่ยมจัตุรัส ก็จะได้วงกลมอยู่ดี:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

ตัวอย่าง

สามารถได้วงกลมด้วย หากตั้งค่า border-radius เป็น 50% (ข้อดี คือเมื่อเปลี่ยนขนาดของสี่เหลี่ยมจัตุรัส ไม่จำเป็นต้องเปลี่ยนค่าความโค้งมน):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

ตัวอย่าง

หากตั้ง border-radius เป็นเปอร์เซ็นต์ สำหรับสี่เหลี่ยมผืนผ้า จะได้ความโค้งมนแบบวงรี หากความกว้างกำหนดเป็น 400px ความสูงเป็น 200px และ border-radius เป็น 10% นี่ก็เหมือนกับ เขียน 40px/20px:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

ตัวอย่าง

กำหนดค่า border-radius เป็น 50% สำหรับสี่เหลี่ยมผืนผ้า - จะได้วงรี:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

ตัวอย่าง

คุณสมบัติ border-radius ทำให้มุมโค้งมนไม่เพียงแต่ มุมของเส้นขอบ แต่ยังรวมถึงพื้นหลังด้วย:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

ดูเพิ่มเติม