Bo góc với thuộc tính border radius trong css

Thuộc tính border-radius trong css3 được dùng để định dạng bo góc cho border (đường viền), được sử dụng để làm tròn một hoặc nhiều góc áp dụng đối với các tag div, hình ảnh...

Thuộc tính border radius trong css

Cấu trúc của thuộc tính border-radius (bo góc)

border-radius: giá trị

Để được hỗ trợ hiển thị tốt trên các trình duyệt như Chrome, Opera, IE, Firefox...chúng ta cần đặt trước các code khác nhau

Đối với các trình duyệt:

Trình duyệt Chrome: -webkit-border-radius
Trình duyệt Firefox: -moz-border-radius
Trình duyệt IE: -ms-border-radius
Trình duyệt Opera: -o-border-radius

Ta có ví dụ:

<html>
   <head>
       <title> Ví dụ thuộc tính border-radius </title>
       <style>
           #vidu {
               border-radius: 20px;
               -webkit-border-radius: 20px;
               -moz-border-radius: 20px;
               -ms-border-radius: 20px;
               -o-border-radius: 20px;
           }
       </style>
   </head>
<body>
   <div id="vidu"> Ví dụ bo góc đường viền </div>
</body>
</html>

Cách bo góc các góc khác nhau trong css

- Bo góc trên - bên trái:

Một giá trị: border-top-left-radius: 5px;

Hai giá trị: border-top-left-radius: 5px 10px;

- Bo góc trên - bên phải:

Một giá trị: border-top-right-radius: 5px;

Hai giá trị: border-top-right-radius: 5px 10px;

- Bo góc dưới - bên trái:

Một giá trị: border-bottom-left-radius: 5px;

Hai giá trị: border-bottom-left-radius: 5px 10px;

- Bo góc dưới - bên phải:

border-bottom-right-radius: 5px;

border-bottom-right-radius: 5px 10px;

Cách viết rút gọn bo 4 góc bằng css

border-radius: 5px 3px 10px 15px;

Trên đây là bài viết hướng dẫn các bạn cách sử dụng thuộc tính border-radius để bo góc cho đối tượng trong css, các bạn có thể đọc thêm bài viết Các thuộc tính border (đường viền) trong css