Bán kính viền cho tất cả trình duyệt?

Question

tôi sử dụng

-webkit-border-radius: 5px;  
border-radius: 5px; 
-moz-border-radius:5px; 
-khtml-border-radius:5px; 

đối với bán kính biên giới nhưng là mã khối không làm việc một số trình duyệt (internet explorer tất nhiên). Tôi đã cố gắng sử dụng .htc nhưng tôi đã không thành công.

Tôi làm cách nào để tạo border-radius được tất cả các trình duyệt hỗ trợ?

Answer 1

Thuộc tính bán kính đường viền được hỗ trợ trong IE9 +, Firefox 4+, Chrome, Safari 5+ và Opera vì đó là thuộc tính CSS3. Cú pháp là:

border-radius: 1-4 length|%/1-4 length|%; 

Ví dụ 1

border-radius:2em; 

tương đương với:

border-top-left-radius:2em; 
border-top-right-radius:2em; 
border-bottom-right-radius:2em; 
border-bottom-left-radius:2em; 

Ví dụ 2

border-radius: 2em 1em 4em/0.5em 3em; 

tương đương với:

0.123.

border-top-left-radius: 2em 0.5em; 
border-top-right-radius: 1em 3em; 
border-bottom-right-radius: 4em 0.5em; 
border-bottom-left-radius: 1em 3em; 

Xem thêm giải thích và mẹo và thủ thuật chi tiết cho bán kính biên giới here.