Tạo bo góc tròn bằng CSS3
(CSS3 Border Radius)

Trình duyệt của bạn không hỗ trợ thuộc tính CSS3 border-radius. Bạn vẫn có thể sử dụng công cụ tạo CSS3 border-radius này nhưng bạn sẽ không nhìn thấy được kết quả trên trình duyệt của bạn.
px
px
px
px

Thuộc tính CSS3 border-radius cho phép chúng ta tạo đường bo gó tròn cho các thành phần HTML mà không cần phải sử dụng hình ảnh hay bất kỳ một kỹ thuật nào khác.

Ví dụ: tạo bo góc cho 4 cạnh của một div có tên là "myDiv" với thuộc tính bo góc là 5px:

Chúng ta có thể chỉ định bo góc riêng cho các cạnh như sau:

Trong ví dụ trên thì góc trái bên trên được đặt bo góc là 5px, góc phải bên trên được đặt bo góc là 10px, góc phải bên dưới được đặt bo góc là 20px và góc trái bên dưới được đặt bo góc là 15px.

Các trình duyệt mới nhất hiện này điều hỗ trợ thuộc tính tạo bo góc border-radius này. Tuy nhiên các phiên bản trước của trình duyệt Mozilla và Webkit hỗ trợ thuộc tính này thông qua các tiếp đầu ngữ của nhà cung cấp. Firefox 3 hỗ trợ thuộc tính bo góc border radius thông qua tiếp đầu ngữ "-moz-" trong khi trình duyệt webkit như Safari và Chrome lại sử dụng tiếp đầu ngữ là "-webkit-".

Một tỷ lệ lớn người dùng vẫn sử dụng các trình duyệt, vì vậy để đạt được bo góc tròn trong nhiều trình duyệt bạn nên sử dụng cú pháp sau:

Ví dụ: trình duyệt Mozilla muốn bo góc tròn góc phải bên dưới thì sẽ định nghĩa như sau:

Các trình duyệt khác như Safari và Chrome định nghĩa như sau:

 

Các trình duyệt hỗ trợ thuộc tính tạo bo góc tròn CSS3 border-radius:

W3C Specification Vendor Prefix
Firefox 4 Yes -
Firefox 1-3 - Yes
Safari 5+ Yes -
Safari 3-4 - Yes
Chrome 5+ Yes -
Chrome 3-5 - Yes
IE9 Yes -
Opera 10.5+ Yes -