Cách thêm góc bo tròn cho button với CSS (border-radius)

Bo góc button với border-radius

Thuộc tính border-radius tạo góc bo tròn cho button (và mọi element). Giá trị px, %, em, rem.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background-color: yellow;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 20px;
      border-radius: 15px;      /* Bo góc 15px */
      border: none;             /* Loại bỏ border mặc định button */
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Result</h2>
  <p>Click below for result:</p>
  <button class="button">Result</button>
</body>
</html>

Các kiểu bo góc button phổ biến

Kiểu	CSS	Mô tả
Bo nhẹ	`border-radius: 4px; / 6px; / 8px;`	Material Design, iOS default
Bo vừa	`border-radius: 12px; / 16px;`	Modern UI, friendly
Pill / Capsule (tròn 2 đầu)	`border-radius: 9999px; / 50px; / 100vh;`	CTA button, tag, badge
Tròn hoàn hảo	`border-radius: 50%; aspect-ratio: 1/1; padding: 0;`	Icon button, FAB
Chỉ bo 2 góc trên	`border-radius: 12px 12px 0 0;`	Tab, card header
Chỉ bo 1 góc	`border-radius: 0 0 0 20px;`	Tooltip, dropdown corner

Button style hoàn chỉnh (Modern)

.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  
  /* Typography */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  
  /* Visual */
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* Colors - Primary */
  background-color: #2563eb;
  color: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn:hover { background-color: #1d4ed8; }
.btn:active { background-color: #1e40af; transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

Lưu ý

Button mặc định có `border`, `padding`, `appearance: auto` - nên reset: `border: none; background: none;` hoặc set rõ ràng.
`border-radius` lớn trên button nhỏ có thể tạo hình elip - dùng `9999px` cho pill shape an toàn.
Kết hợp `box-shadow` cho chiều sâu, `transition` cho hover mượt.