- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính border-radius
Định nghĩa và sử dụng
Thuộc tính border trong css3 dùng để định dạng các dạng bo góc của border ngoài dạng đã được định nghĩa ở css2 [Xem thêm về border trong css2].
Cấu trúc
tag { border: bề-dày kiểu mã-màu; border-radius: giá trị; -moz-border-radius: giá trị; -webkit-border-radius: giá trị; -ms-border-radius: giá trị; -o-border-radius: giá trị; }
Trong đó:
- -moz-animation hỗ trợ cho firefox.
- -webkit-animation hỗ trợ cho Google Chrome và Safari.
- -ms-animation hỗ trợ cho Internet Explorer.
- -o-animation hỗ trợ cho Opera.
HTML viết:
border image
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
Hiển thị trình duyệt khi có CSS:
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- border-radius
border-radius là gì?
Đối với những góc bo tròn, nếu không sử dụng
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 thì sẽ rất phức tạp khi chỉ dùng CSS.
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 cho phép tạo độ bo góc tròn linh hoạt, cấu trúc đơn giản dễ sử dụng.
Cấu trúc
tag {
border-radius: giá-trị;
}
px | 5px | Độ bo góc tròn tính theo pixel |
% | 50% | Độ bo góc tròn tính theo % |
Cách sử dụng
HTML viết:
Border - radius
CSS viết - khi chưa sử dụng border-radius:
div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; text-align: center; width: 100px; }
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 để chỉnh độ bo góc tròn của 4 góc như sau.
CSS viết:
div {
border: 3px solid #ffcccc;
border-radius: 10px;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 để chỉnh độ bo góc tròn của 4 góc như sau.
VD sau đây sẽ cho ta thấy rõ hơn về cách sử dụng
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1, với cách sử dụng giá trị phần trăm [%].
CSS viết:
div {
border: 3px solid #ffcccc;
border-radius: 50%;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng p {
border: 2px solid #cc0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
1 để chỉnh độ bo góc tròn của 4 góc như sau.
CSS viết:
px top-left-radius | 5px | Độ bo góc tròn tính theo pixel |
% top-right-radius | 50% | Độ bo góc tròn tính theo % |
Cách sử dụngbottom-left-radius | HTML viết: | CSS viết - khi chưa sử dụng border-radius: |
Hiển thị trình duyệt:bottom-right-radius | Bây giờ ta sẽ sử dụng p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 để chỉnh độ bo góc tròn của 4 góc như sau. | CSS viết: |
HTML viết:
Border - radius
CSS viết:
div {
border: 3px solid #ffcccc;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }1 để chỉnh độ bo góc tròn của 4 góc như sau.
[tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 75px]
Góc bottom-left sẽ có độ cong là 25px/25pxborder-radius dùng để thiết lập "độ cong" các góc của phần tử HTML.
[tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 25px 25px]
Góc bottom-right sẽ có độ cong là 125px/100px
- [tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 100px]
- Góc bottom-left sẽ có độ cong là 50px/25px
- [tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 50px 25px]
- Góc top-right sẽ có độ cong là 15px/75px
[tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px]
Góc bottom-right sẽ có độ cong là 250px/100px
[tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 250px 100px]border-radius, ta dùng cú pháp như sau:
0border image
Góc bottom-left sẽ có độ cong là 15px/75pxborder-radius có thể được xác định bởi một trong năm loại:
[tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 15px 75px] | 1] Thuộc tính border-radius trong CSS | - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. |
- Ví dụ: | Các góc của phần tử này có độ cong là 10px. | - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. |
- Ví dụ: | Các góc của phần tử này có độ cong là 10px. | - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. |
- Ví dụ: | Các góc của phần tử này có độ cong là 10px. Góc top-left của phần tử này có độ cong là 0px. | - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. |
- Ví dụ: | Các góc của phần tử này có độ cong là 10px. | - Thuộc tính border-radius dùng để thiết lập "độ cong" các góc của phần tử HTML. |
- Ví dụ:
Các góc của phần tử này có độ cong là 10px.border-radius với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn góc của phần tử sẽ có chung một độ cong.
Góc top-left của phần tử này có độ cong là 0px.
- Góc top-right của phần tử này có độ cong là 50px.
- Góc bottom-left của phần tử này có độ cong là 50px.
- Góc bottom-right của phần tử này có độ cong là 100px.
- Góc top-right sẽ có độ cong là 15px/75px
[tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px]
Góc bottom-right sẽ có độ cong là 250px/100px
1border image
- [tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 250px 100px]
- Góc bottom-left sẽ có độ cong là 15px/75px
- Góc bottom-right của phần tử sẽ có độ cong là value3
- Góc bottom-left của phần tử sẽ có độ cong là value4
2border image
Xem ví dụ
3.2] Cú pháp 2
3border image
- Góc top-left của phần tử sẽ có độ cong là value1
- Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
- Góc bottom-right của phần tử sẽ có độ cong là value3
4border image
Xem ví dụ
3.2] Cú pháp 2
5border image
- Góc top-left của phần tử sẽ có độ cong là value1
- Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
6border image
Xem ví dụ
3.2] Cú pháp 2
Góc top-left của phần tử sẽ có độ cong là value1
Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
7border image
Góc bottom-right của phần tử sẽ có độ cong là value3
- 3.3] Cú pháp 3
- Góc top-left & bottom-right của phần tử sẽ có độ cong là value1
Góc top-right & bottom-left của phần tử sẽ có độ cong là value2
8border image
4] Thiết lập độ cong của từng góc [khi giá trị là width/height]
- - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.
- - Trong đó:
- Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.
- - Khi đó:
- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:
Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.
- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:
Góc top-left sẽ có độ cong là 250px/100px
Góc top-right & bottom-left của phần tử sẽ có độ cong là value2
9border image
4] Thiết lập độ cong của từng góc [khi giá trị là width/height]
- - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.
- - Trong đó:
- Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.
- - Khi đó:
- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:
Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.
- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:
Góc top-left sẽ có độ cong là 250px/100px
Góc top-right & bottom-left của phần tử sẽ có độ cong là value2
p { border: 2px solid #cc0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }0
4] Thiết lập độ cong của từng góc [khi giá trị là width/height]
- - Nếu ta thiết lập độ cong từng góc của phần tử theo cách xác định độ cong dựa vào chiều rộng & chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên.
- - Trong đó:
- Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.
- - Khi đó:
- Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:
Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.
- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau:
Góc top-left sẽ có độ cong là 250px/100px