Thuộc tính border-radius CSS3

Để bo tròn các góc của phần tử, bạn sử dụng thuộc tính border-radius

<style>
    .border1 {
        border-radius: 20px;
        background-color: green;
        color: white;
        width: 150px;
        height: 100px;
        padding: 20px;
    }
</style>

<div class="border1">
    Ví dụ về border-radius
</div>
Ví dụ về border-radius

Bạn có thể chỉ ra từng bán kính bo tròn của các góc khác nhau:

border-radius: Rgóc-trên-trái rgóc-trên-phải r-góc-dưới-phải r-góc-dưới-trái;
border-radius: 0 0 20px 20px;

Ví dụ thiết lập bo tròn theo từng góc

<style>
    .border2 {
        border-radius: 0 0 15px 15px;
        background-color: green;
        color: white;
        width: 150px;
        height: 100px;
        padding: 20px;
    }
</style>

<div class="border2">
    Ví dụ về bo tròn 2 góc phía dưới
</div>
Ví dụ về bo tròn 2 góc phía dưới

Tạo ra hình tròn

Bạn có thể chuyển hình vuông thành tròn, bằng cách điều chỉnh bán kính bo tròn các góc bằng nửa kích thước hình vuông

<style>
    div.circleexam {
        height: 200px;
        width: 200px;
        border-radius: 100px;
        line-height: 200px;
        text-align: center;
            border: 2px dashed #f69c55;
        background-color: green;

    }
    div.circleexam span{
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
        color: white;

    }
</style>

<div class="circleexam">
    <span>HÌNH TRÒN</span>
</div>
HÌNH TRÒN
Đăng ký theo dõi ủng hộ kênh