Cách tạo góc bo tròn cho phần tử HTML bằng CSS

Thuộc tính border-radius dùng để tạo góc bo tròn cho các phần tử, hình ảnh,.....

Cách tạo góc bo tròn cho phần tử

Một phần tử luôn có bốn góc ở bốn vị trí như sau:

Để tạo góc bo tròn cho phần tử dựa theo từng vị trí cụ thể, ta sử dụng cú pháp:

Độ bo tròn của góc có thể xác định theo đơn vị: px, em, hoặc %

div{
    border-bottom-right-radius: 50px;
}
img{
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

Thuộc tính border-radius thường được sử dụng chung với thuộc tính border để tạo đường viền bo tròn

div {
    border:2px solid black;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

Cú pháp rút gọn

Thông thường, để bo tròn bốn góc cho một phần tử ta phải dùng đến bốn thuộc tính.

Bây giờ, chỉ với một một thuộc tính border-radius ta có thế bo tròn cho cả bốn góc.

Thuộc tính border-radius có bốn cách sử dụng:

• Cả bốn góc đều có giá trị là value

• Góc top-left và bottom-right có giá trị value1
• Góc top-right và bottom-left có giá trị value2

• Góc top-left có giá trị value1
• Góc top-right và bottom-left có giá trị value2
• Góc bottom-right có giá trị value3

• Góc top-left có giá trị value1
• Góc top-right có giá trị value2
• Góc bottom-right có giá trị value3
• Góc bottom-left có giá trị value4

.div1{border-radius:50%;}
.div2{border-radius:10% 50%;}
.div3{border-radius:10px 30px 70px;}
.div4{border-radius:10% 30% 50% 20%;}

Tạo góc hình elip

.div1{border-radius: 30px/80px;}
.div2{border-radius: 80px/30px;}