Cách đặt 4 thuộc tính border-radius cùng lúc bằng JavaScript

Thuộc tính borderRadius** (shorthand) cho phép bạn đặt bo góc cho cả 4 góc trong một khai báo. Cú pháp linh hoạt từ 1 đến 8 giá trị (cho 4 góc, mỗi góc có thể có bán kính ngang và dọc riêng).

Ví dụ minh họa

Mã sau bo tròn 4 góc hộp với bán kính 20px khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="box">Văn bản demo</div>
  <br><br>
  <button type="button" onclick="addBorderRadius()">Thêm border radius</button>
  <script>
    function addBorderRadius() {
      document.getElementById("box").style.borderRadius = "20px";
      /* 1 giá trị -> 4 góc đều 20px */
    }
  </script>
</body>
</html>

Cú pháp borderRadius (1-8 giá trị)

Thuộc tính con riêng lẻ

• borderTopLeftRadius
• borderTopRightRadius
• borderBottomRightRadius
• borderBottomLeftRadius

Mẹo: Dùng borderRadius: "50%" trên phần tử vuông để tạo hình tròn hoàn hảo.