CSS3: Bo góc với border-radius
CSS3 cho phép bạn có thể bo tròn các góc mà không cần phải lập trình hay sử dụng kỹ thuật Photoshop bằng cách sử dụng thuộc tính border-radius.
Có bốn góc sau đây bạn cần biết: trên-trái, trên-phải, dưới-trái, dưới-phải.
Trình duyệt hỗ trợ
Internet Explorer 9+, FireFox, Chrome, Safari, Opera.
Sau đây là các cú pháp áp dụng của thuộc tính border-radius:
Cú pháp 1:
border-radius: [Bán_kính];
Cú pháp trên sẽ bo tròn góc giống nhau cho cả bốn góc của hình.
Ví dụ: border-radius: 10px; /*Cả 4 góc đều được bo tròn với bán kính 10px*/
Cú pháp 2:
border-radius: [trên-trái và dưới-phải] [trên-phải và dưới-trái]; /*2 giá trị*/
Cú pháp trên sẽ bo tròn góc cho hai cặp góc so le của hình.
Ví dụ: border-radius: 5px 10px;
Cú pháp 3:
border-radius: [trên-trái] [trên-phải và dưới-trái] [dưới-phải]; /*3 giá trị*/
Cú pháp trên sẽ bo tròn góc cho góc trên-trái, góc trên-phải và góc dưới-trái cùng nhận bán kính giống nhau, và góc dưới-phải của hình.
Ví dụ: border-radius: 5px 10px 15px;
Cú pháp 4:
border-radius: [trên-trái] [trên-phải] [dưới-trái] [dưới-phải]; /*4 giá trị*/
Cú pháp trên sẽ bo tròn góc cho từng góc của hình.
Ví dụ: border-radius: 5px 10px 15px 20px;
Sau đây là một ví dụ cụ thể của thuộc tính border-radius.
Ví dụ: Phần code dưới đây sẽ bo tròn góc cho phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1{
padding:10px 40px;
background:green;
width:300px;
color:white;
height:80px;
margin:10px;
}
#d1:first-child{
border-radius:10px;
}
#d1:nth-child(2){
border-radius:10px 20px;
}
#d1:nth-child(3){
border-radius:10px 20px 30px;
}
#d1:last-child{
border-radius:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="d1">Cả 4 góc đều có bán kính như nhau = 10px.</div>
<div id="d1">Các góc trên-trái và dưới-phải có bán kính 10px.<br>Các góc trên-phải và dưới-trái có bán kính 20px.</div>
<div id="d1">Góc trên-trái có bán kính 10px.<br>Góc trên-phải và dưới-trái có bán kính 20px.<br>Góc dưới-phải có bán kính 30px.</div>
<div id="d1">Góc trên-trái có bán kính 10px.<br>Góc trên-phải có bán kính 20px.<br>Góc dưới-phải có bán kính 30px.<br>Góc dưới-trái có bán kính 40px.</div>
</body>
</html>