Góc tròn CSS

Góc tròn CSS

Qua CSS border-radius Thuộc tính, có thể thực hiện bất kỳ yếu tố nào có phong cách 'đường cong'.

Thuộc tính border-radius CSS

CSS border-radius Thuộc tính định nghĩa bán kính của góc phần tử.

Lưu ý:Bạn có thể sử dụng thuộc tính này để thêm góc tròn cho phần tử!

Có ba ví dụ này:

1. Góc tròn của phần tử có màu nền đã chỉ định:

Góc tròn!

2. Góc tròn của phần tử có viền:

Góc tròn!

3. Góc tròn của phần tử có hình ảnh nền:

Góc tròn!

Đây là mã nguồn:

Ví dụ

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  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; 
}

Thử ngay

Lưu ý:border-radius Thuộc tính này thực chất là viết tắt của các thuộc tính sau:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Định nghĩa mỗi góc

border-radius Thuộc tính này có thể chấp nhận một đến bốn giá trị. Quy tắc như sau:

Bốn giá trị - border-radius: 15px 50px 30px 5px;(Sử dụng theo thứ tự: góc trên cùng bên trái, góc trên cùng bên phải, góc dưới cùng bên phải, góc dưới cùng bên trái):

Ba giá trị - border-radius: 15px 50px 30px;(Giá trị đầu tiên được sử dụng cho góc trên cùng bên trái, giá trị thứ hai được sử dụng cho góc trên cùng bên phải và góc dưới cùng bên trái, giá trị thứ ba được sử dụng cho góc dưới cùng bên phải):

Hai giá trị - border-radius: 15px 50px;(Giá trị đầu tiên được sử dụng cho góc trên cùng bên trái và góc dưới cùng bên phải, giá trị thứ hai được sử dụng cho góc trên cùng bên phải và góc dưới cùng bên trái):

Một giá trị - border-radius: 15px;(Giá trị này được sử dụng cho tất cả bốn góc, các góc tròn đều nhau):

Đây là mã nguồn:

Ví dụ

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Thử ngay

Bạn có thể tạo góc tròn:

Ví dụ

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Thử ngay

Thuộc tính góc tròn CSS

Thuộc tính Mô tả
border-radius Được sử dụng để thiết lập tính chất viết tắt cho tất cả bốn thuộc tính border-*-*-radius.
border-top-left-radius Định hình cạnh trên bên trái của đường viền.
border-top-right-radius Định hình cạnh trên bên phải của đường viền.
border-bottom-right-radius Định hình cạnh dưới bên phải của đường viền.
border-bottom-left-radius Định hình cạnh dưới bên trái của đường viền.