Thuộc tính border-radius

Thuộc tính border-radius tạo ra các góc bo tròn cho đường viền và nền. Giá trị của thuộc tính là bất kỳ đơn vị cho kích thước nào. Giá trị mặc định: 0. Là cách viết tắt cho các thuộc tính border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Cú pháp

bộ chọn {
	border-radius: giá trị;
}

Số lượng giá trị

Thuộc tính có thể nhận 1, 2, 3 hoặc 4 giá trị, được chỉ định cách nhau bằng dấu cách:

Số lượng	Mô tả
`1`	Cho tất cả các góc cùng một lúc.
`2`	Giá trị đầu tiên đặt độ bo cho góc trên bên phải và dưới bên trái, giá trị thứ hai - cho góc trên bên trái và dưới bên phải.
`3`	Giá trị đầu tiên đặt độ bo cho góc trên bên trái, giá trị thứ hai - đồng thời cho góc trên bên phải và dưới bên trái, và giá trị thứ ba - cho góc dưới bên phải.
`4`	Giá trị đầu tiên đặt độ bo cho góc trên bên trái, giá trị thứ hai - cho góc trên bên phải, giá trị thứ ba - cho góc dưới bên phải, và giá trị thứ tư - cho góc dưới bên trái.

Độ bo hình elip

Hai giá trị cách nhau bởi dấu gạch chéo thiết lập độ bo hình elip. Giá trị trước dấu gạch chéo chỉ định độ bo theo chiều ngang, và giá trị sau dấu gạch chéo - độ bo theo chiều dọc:

bộ chọn {
	border-style: chiều ngang / chiều dọc;
}

Nếu đặt độ bo cho nhiều góc, thì trước dấu gạch chéo liệt kê tất cả các độ bo theo chiều ngang, và sau nó - tất cả các độ bo theo chiều dọc.

Ví dụ

Hãy thiết lập độ bo 10px cho tất cả các góc:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ví dụ

Hãy xem độ bo trông như thế nào đối với đường viền dạng chấm:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Ví dụ

Hãy thiết lập độ bo 10px cho các góc của một đường chéo, và độ bo 40px - cho các góc của đường chéo thứ hai:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ví dụ

Hãy thiết lập độ bo 10px cho góc trên bên trái, độ bo 30px cho góc dưới bên phải, và độ bo 50px - cho các góc của đường chéo thứ hai:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ví dụ

Hãy thiết lập các độ bo khác nhau cho từng góc:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Ví dụ

Hãy tạo độ bo hình elip, thiết lập 20px cho phần bo theo chiều ngang, và 40px - cho phần bo theo chiều dọc:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Ví dụ

Bây giờ hãy thiết lập độ bo hình elip khác nhau cho từng góc riêng biệt:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Ví dụ

Nếu đặt độ bo cho một khối vuông bằng một nửa cạnh của hình vuông, thì sẽ thu được một hình tròn:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Ví dụ

Nếu đặt độ bo lớn hơn cạnh hình vuông, thì vẫn sẽ thu được một hình tròn:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Ví dụ

Cũng có thể thu được hình tròn nếu đặt border-radius bằng 50% (ưu điểm là khi thay đổi kích thước hình vuông không cần phải thay đổi độ bo):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Ví dụ

Nếu đặt border-radius theo phần trăm cho một hình chữ nhật, sẽ thu được độ bo hình elip. Nếu chiều rộng được đặt là 400px, chiều cao là 200px, và border-radius là 10%, thì điều này tương đương như 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Ví dụ

Hãy đặt giá trị border-radius thành 50% cho hình chữ nhật - sẽ thu được một hình elip:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Ví dụ

Thuộc tính border-radius không chỉ bo tròn các góc của đường viền, mà còn cả nền:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Xem thêm

thuộc tính border,
là thuộc tính viết tắt cho đường viền