Thuộc tính border-radius trong CSS

Posted on by mtoplistChuyên mục:Top List

Bo tròn các góc của box phần tử HTML bằng thuộc tính border-radius trong CSS, bo tròn css có thể áp dụng bo tròn ảnh, tạo ra các hình trò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Ý KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB

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

mtoplist