CSS cơ bản

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ú pháp như sau:

border-radius: [radius value] [radius value]? [radius value]? [radius value]?;

Các giá trị liệt kê là bán kính góc bo tròn, các giá trị có dấu ? là tùy chọn (có thể không có). Như vậy thiết lập giá trị cho border-radius có thể là 1 đến 4 tham số bán kínhh

Cụ thể:

Đủ 4 giá trị
border-radius: 10px 20px 30px 40px;

Bán kính bo tròn góc theo tứ tự là các góc: trên trái (10px), trên phải (20px), dưới phải (30px), dưới trái (40px)

<div style="height: 100px;
            width:  100px;
            background: green;
            border-radius: 10px 20px 30px 40px;">
</div>
Nhận 3 giá trị
border-radius: 5px 20px 50px;

Bán kính bo tròn góc theo tứ tự là các góc: trên trái (5px), trên phải và dưới trái nhận giá trị thứ 2 (20px) dưới phải là giá trị thứ 3 (50px)

<div style="height: 100px;
            width:  100px;
            background: green;
            border-radius: 5px 20px 50px;">
</div>
Nhận 2 giá trị
border-radius: 5px 40px;

Bán kính bo tròn góc theo tứ tự là các góc: trên trái và dưới phải nhận giá trị thứ nhất (5px), dưới trái và trên phải nhận giá trị thứ hai (40px)

<div style="height: 100px;
            width:  100px;
            background: green;
            border-radius: 5px 40px;">
</div>
Nhận 1 giá trị
border-radius: 10px;

Bán kính bo tròn cả 4 góc đều bằng nhau (10px)

<div style="height: 100px;
            width:  100px;
            background: green;
            border-radius: 10px;">
</div>

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>
    .circleexam {
        height: 200px;
        width: 200px;
        border-radius: 50%; /*  100px */
        
        line-height: 200px;
        text-align: center;
        border: 2px dashed #f69c55;
        background: 
            url("https://images.freeimages.com/images/previews/218/my-dog-cutter-1499799.jpg") 
            center / cover no-repeat;

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

    }
     
</style>
<div class="circleexam">
    <span>HÌNH TRÒN</span>
</div>
HÌNH TRÒN

Các thuộc tính thiết lập bán kính bo tròn góc riêng lẻ

Ngoài sử dụng thuộc tính border-radius như trên, nếu chỉ cần thiết lập bo tròn một góc cụ thể nào đó thì bạn có thể sử dụng trực tiếp các thuộc tính:

  • border-top-left-radius : thiết lập bán kính bo tròn góc trên trái
  • border-top-right-radius : thiết lập bán kính bo tròn góc trên phải
  • border-bottom-right-radius : thiết lập bán kính bo tròn góc dưới phải
  • and border-bottom-left-radius : thiết lập bán kính bo tròn góc dưới trái

Đăng ký nhận bài viết mới