Thuộc tính border-radius trong CSS3

Thuộc tính border-radius là 1 thuộc tính mới xuất hiện ở HTML5. Thuộc tính này rất hữu dụng để bo tròn các góc của 1 phần tử (element) DIV hoặc SPAN. Trong quá trình thiết kế website người ta luôn sử dụng thuộc tính này để làm đẹp hình ảnh và đơn giản một điều là nó không làm ảnh hưởng đến việc load trang cho web ngược lại còn góp phần làm đẹp, tạo điểm nhấn cho hình ảnh mà bạn muốn truyền tải. Trong thủ thuật hôm nay longanit xin hướng dẫn các bạn cách để chúng ta sử dụng tính năng này.

Thuộc tính border-radius trong 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>

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>

Gọi HTML với Style được thiết lập ở trên 

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

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>