Nội dung chính
Bo tròn góc (Rounded Corner) trong CSS
Bo tròn góc (Rounded Corner) trong CSS được sử dụng để thêm góc màu tới phần thân tài liệu hoặc phần văn bản bởi sử dụng thuộc tính border-radius. Cú pháp đơn giản của Rounded Corner như sau:
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
Bảng dưới liệt kê một số giá trị mà Rounded Corner có thể nhận:
| Giá trị | Mô tả |
|---|---|
| border-radius | Sử dụng phần tử này để thiết lập 4 thuộc tính border radius |
| border-top-left-radius | Sử dụng phần tử này để thiết lập góc trái trên cùng của border |
| border-top-right-radius | Sử dụng phần tử này để thiết lập góc phải trên cùng của border |
| border-bottom-right-radius | Sử dụng phần tử này để thiết lập góc phải dưới cùng của border |
| border-bottom-left-radius | Sử dụng phần tử này để thiết lập góc trái dưới cùng của border |
Ví dụ bo tròn góc trong CSS
Thuộc tính này có thể có ba giá trị. Ví dụ sau sử dụng cả hai giá trị:
<html>
<head>
<meta charset="UTF-8">
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="rcorners1">Ví dụ bo tròn góc trong CSS!</p>
<p id="rcorners2">Ví dụ bo tròn góc trong CSS!</p>
<p id="rcorners3">Ví dụ bo tròn góc trong CSS!</p>
</body>
</html>
Kết quả:
Thiết lập thuộc tính cho mỗi góc trong CSS
Chúng ta có thể thiết lập thuộc tính cho mỗi góc như trong ví dụ sau:
<html>
<head>
<meta charset="UTF-8">
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id="rcorners1"></p>
<p id="rcorners2"></p>
<p id="rcorners3"></p>
</body>
</html>
Kết quả:
