Góc cạnh tròn CSS

Góc cạnh 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 'góc tròn'.

Thuộc tính CSS border-radius

CSS border-radius Thuộc tính định nghĩa bán kính góc của 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:

Mô hình

#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 thực chất là thuộc tính 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 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 bên trái、góc trên bên phải、góc dưới bên phải、góc dưới 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 bên trái，giá trị thứ hai được sử dụng cho góc trên bên phải và dưới bên trái，giá trị thứ ba được sử dụng cho góc dưới 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 bên trái và dưới phải，giá trị thứ hai được sử dụng cho góc trên bên phải và dưới 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 giống nhau）：

Đây là mã nguồn:

Mô hình

#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椭圆:

Mô hình

#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 Đây là thuộc tính viết tắt để thiết lập tất cả bốn thuộc tính border-*-*-radius.
border-top-left-radius Định dạng góc trên bên trái của viền.
border-top-right-radius Định dạng góc trên bên phải của viền.
border-bottom-right-radius Định dạng góc dưới bên phải của viền.
border-bottom-left-radius Định dạng góc dưới bên trái của viền.