Bo tròn góc element trong CSS - CSS Rounded Corners

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    14 thg 11, 2022

  • Số lượt xem

    299 lượt xem


Trong CSS với thuộc tính border-radius chúng ta có thể bo tròn góc các element giúp cho việc thiết kế website trở nên đẹp và đa dạng hơn.

CSS border-radius

Thuộc tính border-radius CSS xác định độ bo góc của element.

Mẹo: Thuộc tính này cho phép bạn thêm các góc tròn vào các element!

Dưới đây là ba ví dụ:

1. Các góc được làm tròn cho một element có màu nền được chỉ định:

 

2. Các góc được làm tròn cho element có đường viền:

 

3. Các góc được làm tròn cho một element có hình nền:

 

#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;  }

 

Mẹo: Thuộc tính border-radius thực sự là thuộc tính viết tắt cho các thuộc tính border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius.

Chỉ định các góc cho CSS border-radius

Thuộc tính border-radius có thể có từ một đến bốn giá trị. Đây là các quy tắc:

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

 

Ba giá trị - border-radius: 15px 50px 30px; (giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai áp dụng cho góc trên cùng bên phải và dưới cùng bên trái, giá trị thứ ba áp 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 áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải, giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái):

 

Một giá trị - border-radius: 15px; (giá trị áp dụng cho tất cả bốn góc, được làm tròn bằng nhau:

 

#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;  }

 

Bạn cũng có thể tạo các góc hình elip:

#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;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.