CSS3 - Giới thiệu (Bài trước)
(Bài tiếp) CSS3 - Bóng đổ

Thuộc tính border-radius trong CSS, bo tròn góc phần tử

Để bo tròn các góc của phần tử, bạn sử dụng thuộc tính border-radius, giá trị nhận của thuộc tính là bán bo tròn góc. Có thể chỉ định ra bán kính từng góc, tùy thuộc vào cách nhập giá trị bán kính trong border-radius, một vài trường hợp phổ biến như sau:

border-radius: 20px; (1 giá trị) - bo tròn cả bốn góc với bán kính 20px
border-radius: 15px 10px; (2 giá trị) - bo tròn góc trên trái, dưới phải bán kính 1 (15px), bo tròn góc dưới trái, trên phải bán kính 2 (10px)
border-radius: 10px 20px 30px 40px; (4 giá trị) - bo tròn góc theo tứ tự trên trái, trên phải, dưới phải, dưới trái tương ứng với bán kính 10px, 20px, 30px, 40px
<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 sử dụng border-radius

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 của phần tử HTML

<style>
    div.circleexam {
        height: 200px;
        width: 200px;
        border-radius: 50%; // 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ý nhận bài viết mới
CSS3 - Giới thiệu (Bài trước)
(Bài tiếp) CSS3 - Bóng đổ