วิธีสร้าง CSS3 Rounded Corners (มุมโค้ง)

Border-radius: ทำมุมโค้งให้ Box/Element

Property border-radius ทำมุมโค้งได้ทุก element (div, img, button, input, table) รองรับ 1-4 ค่า และ horizontal/vertical radius แยกกันได้

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { display: inline-block; width: 200px; height: 200px; text-align: center; font-size: 30px; }
    .rounded { border-radius: 24px; border: 4px solid green; }
    .normal { border: 4px solid green; margin-left: 20px; }
  </style>
</head>
<body>
  <h1>CSS3 Rounded Corner Example</h1>
  <div class="rounded">Rounded Corners</div>
  <div class="normal">Default corners</div>
</body>
</html>

Border-radius Values

Syntax	ผลลัพธ์
border-radius: 10px;	มุมทั้ง 4 โค้ง 10px
border-radius: 10px 20px 30px 40px;	TL, TR, BR, BL (clockwise)
border-radius: 10px 20px;	TL/BR=10px, TR/BL=20px
border-radius: 50%;	วงกลม (ถ้า width=height) / ไข่
border-radius: 50% / 25%;	Horizontal radius 50%, Vertical radius 25% (slash syntax)

แยกมุมแต่ละมุม (Longhands)

.custom {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

Advanced Shapes

Pill/Button: border-radius: 9999px (ใหญ่กว่าครึ่งความสูง)
Leaf: border-radius: 0 100% 0 100%
Speech bubble: รวมกับ ::after triangle

Clip-path Alternative

รูปทรงซับซ้อน (star, polygon, custom) ใช้ clip-path แทน border-radius