Để trang trí trang web bạn sẽ phải sử dụng rất nhiều thuộc tính khác nhau. Trong đó border-radius trong CSS là một trong những thuộc tính thường được mọi người sử dụng.
Thuộc tính Border-radius trong CSS là gì?
Với border-radius bạn sẽ sử dụng để bo góc hay làm cong các góc phần tử HTML để trang trí giao diện đẹp mắt dễ nhìn hơn.
Để sử dụng border radius bạn sẽ viết như sau:
border-radius: value1 value2 value3 value4;
value1: độ cong của top-left;
value2: độ cong của top-right;
value3: độ cong của bottom-right;
value4: độ cong của bottom-left;
Ví dụ bạn chạy đoạn code này:
<!DOCTYPE html>
<html>
<head>
<title> Ví dụ về border radius trong css </title>
<style type="text/css">
.bogoc{
width:400px;
height:200px;
background-color:blue;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="bogoc"></div>
</body>
</html>
Kết quả là:
Các cách viết thuộc tính border-radius:
border-radius: 10px; bo đều 4 góc
border-radius: 10px 30px;
bo góc top-left và bottom-right là 10px
bo góc top-right và bottom-left là 30px;
border-radius: 10px 30px 50px 80px;
bo góc top-left là 10px;
bo góc top-right là 30px;
bo góc bottom-right là 50px;
bo góc bottom-left là 80px;
Để bo tròn 4 góc bạn viết như sau:
.bogoc{
width:200px;
height:200px;
background-color:blue;
border-radius: 200px;
}
Trường hợp bo 1 góc:
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
Bo góc kiểu thêm 2 giá trị:
border-top-left-radius: 50px 200px;
50px là giá trị bo góc top;
200px là giá trị bo góc left;
Border-radius trong CSS3
Để border-radius hoạt động tốt trên trình duyệt Chrome, Firefox, Safary thì bạn sẽ phải viết thêm:
border-radius: 10px; -moz-border-radius: 10px; /*Firefox*/ -webkit-border-radius: 10px;/*Chrome và Safary*/
Kết luận: Qua ví dụ về Border radius CSS trên đây mang đến cho bạn kiến thức bổ ích về ngôn ngữ CSS rồi phải không nào. Hãy bắt tay vào thực hành ngày để xem kết quả như thế nào nhé!
