- 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 border-radius
thì sẽ rất phức tạp khi chỉ dùng CSS.
border-radius
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 border-radius
để 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:
Nhìn kết quả trên, ta thấy 4 góc của CSS viết: Hiển thị trình duyệt: Chúng ta có thể điều khiển từng góc riêng biệt thay vì điều khiển cùng lúc 4 góc. HTML viết: CSS viết: Hiển thị trình duyệt: Tới đây chắc các bạn đã biết cách dùng - 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. - Lưu ý: Chúng ta chỉ thấy được độ cong các góc của phần tử khi phần tử được thiết lập đường viền hoặc màu nền. - Để sử dụng thuộc tính border-radius, ta dùng cú pháp như sau: - Trong đó, ta thấy giá trị thuộc tính border-radius có thể được xác định bởi một trong năm loại: - Xác định độ cong các góc dựa theo một giá trị pixel cụ thể. - Xác định độ cong các góc dựa theo tỷ lệ % kích thước của phần tử. - Độ cong của các góc được xác định dựa vào một chiều rộng & một chiều cao chỉ định. - Sử dụng giá trị mặc định của nó. [mặc định thì các góc của phần tử không có độ cong] - Kế thừa giá trị thuộc tính border-radius từ phần tử cha của nó - Khi chúng ta sử dụng thuộc tính 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. - Tuy nhiên, nếu muốn mỗi góc của phần tử có một độ cong riêng biệt [giống ví dụ bên dưới], thì ta phải làm như thế nào !? - Để xác định độ cong ở từng góc của phần tử thì ta có một số cú pháp như sau: Xem ví dụ Xem ví dụ Xem ví dụ - 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. - Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height: - Trong đó: - Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: [tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px] [tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px] [tương
đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 75px] [tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 25px 25px] - Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: [tương đương với thuộc tính border-top-left-radius được thiết lập giá
trị 250px 100px] [tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px] [tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 100px] [tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 50px 25px]
- Nếu ta thiết lập độ cong các góc của phần tử với cú pháp như sau: - Khi đó: [tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px] [tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px] [tương đương với thuộc tính
border-bottom-right-radius được thiết lập giá trị 250px 100px] [tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 15px 75px]
VD
sau đây sẽ cho ta thấy rõ hơn về cách sử dụng border-radius
, với cách sử dụng giá trị phần trăm [%].div {
border: 3px solid #ffcccc;
border-radius: 50%;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
Ví dụ thêm
Thuộc tínhVDMô tả border-top-left-radius
border-top-left-radius: 5px
Độ bo góc tròn góc trên - bên trái.
border-top-right-radius
border-top-right-radius: 5px
Độ bo góc tròn góc trên - bên phải.
border-bottom-left-radius
border-bottom-left-radius: 5px
Độ bo góc tròn góc dưới - bên trái.
border-bottom-right-radius
border-bottom-right-radius: 5px
Độ bo góc tròn góc dưới - bên phải.
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;
}
border-radius
như thế nào, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo border-radius hoặc xem
công cụ tạo border-radius nhé.1] Thuộc tính border-radius trong CSS
2] Cách sử dụng thuộc tính border-radius trong CSS
border-radius: pixel|percent|width/height|initial|inherit;
pixel
Xem ví dụ
percent
Xem ví dụ
width/height
Xem ví dụ
initial
Xem ví dụ
inherit
Xem ví dụ
3] Thiết lập độ cong của từng góc
3.1] Cú pháp 1
border-radius: value1 value2 value3 value4;
div{
width:500px;
height:200px;
background-color:gray;
border-radius: 0px 15px 50% 75px;
}
3.2] Cú pháp 2
border-radius: value1 value2 value3;
div{
width:500px;
height:200px;
background-color:gray;
border-radius: 0px 50% 30px;
}
3.3] Cú pháp 3
border-radius: value1 value2;
div{
width:500px;
height:200px;
background-color:gray;
border-radius: 0px 50%;
}
4] Thiết lập độ cong của từng góc [khi giá
trị là width/height]
border-radius: bộ giá trị thứ nhất/bộ giá trị thứ hai;
border-radius: 250px 50px 125px 25px / 100px 25px 75px 25px;
border-radius: 250px 50px 125px / 100px 25px;
border-radius: 250px 15px / 100px 75px;
Chủ Đề