Bản mẫu:border-radius
 | Bản mẫu:Border-radius này đã lỗi thời. Xin hãy gọi trực tiếp thuộc tính border-radius của CSS, nay đã được tất cả các trình duyệt hỗ trợ. |
 | Bản mẫu này được sử dụng ở khoảng 273.000 trang, chiếm ≈ 1% tổng số trang. Để tránh gây lỗi trên quy mô lớn và tải máy chủ không cần thiết, tất cả thay đổi cần được thử nghiệm ở trang con /sandbox, /testcases của bản mẫu, hoặc ở không gian người dùng của bạn. Các thay đổi đã được thử nghiệm có thể thêm vào bản mẫu bằng một sửa đổi duy nhất. Xin hãy thảo luận các thay đổi tại trang thảo luận trước khi áp dụng sửa đổi. |
 | Bản mẫu này được sử dụng trong thông báo hệ thống, và ở khoảng 273.000 trang, chiếm ≈ 1% tổng số trang. Thay đổi đến nó có thể dẫn đến thay đổi ngay lập tức giao diện người dùng Wikipedia. Để tránh gây lỗi trên quy mô lớn và tải máy chủ không cần thiết, tất cả thay đổi cần được thử nghiệm ở trang con /sandbox, /testcases của bản mẫu, hoặc ở không gian người dùng của bạn. Các thay đổi đã được thử nghiệm có thể thêm vào bản mẫu bằng một sửa đổi duy nhất. Xin hãy thảo luận các thay đổi tại trang thảo luận trước khi áp dụng sửa đổi. |
Bản mẫu này là một phím tắt để tạo ra các góc tròn. Nó tạo CSS cho các trình duyệt khác nhau. Các trình duyệt được hỗ trợ là các phiên bản hiện tại của Opera, Firefox, Safari, Chrome và Internet Explorer.
Sử dụng
Chèn bản mẫu này trong thẻ kiểu của bất kỳ thành phần kiểu khối nào:
{{border-radius | radius1 [radius2 radius3 radius4]}}
- Nếu một giá trị được đặt, bán kính này áp dụng cho cả 4 góc.
- Nếu bốn giá trị được đặt, chúng sẽ áp dụng cho góc trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái theo thứ tự đó.
Không sử dụng hai hoặc ba giá trị, vì điều này dẫn đến kết xuất khác nhau giữa các trình duyệt khác nhau.
Ví dụ
<div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{border-radius|16px 8px 16px 8px}}">Lorem ipsum...</div>sẽ tạo ra:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tương thích
- Xem border-radius trên Mozilla Developer Network để biết tất cả các chi tiết tương thích trình duyệt.
Xem thêm
- {{box-shadow}}
- {{linear-gradient}}