12 tháng 9, 2019

Thuộc tính Border trong CSS


Border có nghĩa là đường viền. Các thuộc tính Border dùng để đinh dạng cho đường viền, gồm có màu sắc, độ dày và hình dạng đường viền (liền, đứt, nét kép ..... )
Đây là ví dụ về định dạng đường viền (Border)

Đây là ví dụ về định dạng đường viền (Border)
Đây là ví dụ về định dạng đường viền (Border)

I. Các thuộc tính cơ bản của đường viền (Border)

1. Border-color

- Thuộc tính border-color dùng để chỉ định màu sắc cho đường viền
- Giá trị của thuộc tính có thể là mã màu hoặc một từ Tiếng Anh
- Ví dụ: border-color: #000000 hoặc border-color: black

2. Border-width

- Thuộc tính border-width dùng để chỉ định độ dày cho đường viền
- Giá trị của thuộc tính được tính theo đơn vị đo như px, em, pt, cm ......
- Ví dụ: border-width: 5px

3. Border-style

- Thuộc tính border-style dùng để chỉ định hình dạng cho đường viền, như nét đứt, liền, nét kép

- Giá trị của thuộc tính gồm: 
noneKhông có đường viền
hiddenĐường viền bị ẩn đi
solid
Đường viền kiểu nét liền thông thường
dashed
Đường viền kiểu nét đứt
dotted
Đường viền kiểu chấm chấm
double
Đường viền kép
groove
Đường viền kiểu đường rãnh
ridge
Đường viền kiểu lồi lên
inset
Đường viền kiểu inset
outset
Đường viền kiểu outset
initial
Sử dụng giá trị mặc định của nó. Thông thường sẽ là none
inheritKế thừa giá trị của phần tử html cha
Lưu ý: Khi đặt thuộc tính cho đường viền là none hoặc hidden thì người xem đều không nhìn thấy đường viền. Nhưng none là không có, còn hidden là vẫn có đường viền nên vẫn chiếm diện tích, độ dày càng lớn thì khoảng trắng càng lớn.


II. Cách khai báo định dạng border kiểu shorthand 

Thay vì phải khai báo từng thuộc tính một dòng thì bạn có thể viết rút gọn lại.
Cú pháp: border: value1 value2 value3;
Ví dụ: border: solid #009999 8px;

III. Định dạng đường viền theo từng cạnh

Trong thực tế không phải lúc nào cũng định dạng 4 cạnh đường viền như nhau mà chúng ta có thể định dạng mỗi cạnh đường viền theo một kiểu, tương ứng với các vị trí: Top (trên); right (phải); bottom (dưới); left (trái)

1. Cách khai báo cơ bản

Chúng ta sẽ khai báo theo vị trí của từng cạnh. Cú pháp là: border-vị trí-thuộc tính: giá trị;
Ví dụ
<style type="text/css">
        div{
            border:6px solid red;
            border-top-color: greenyellow;
        }
</style>

Kết quả



2. Cách khai báo kiểu shorthand (viết tắt)

Cú pháp 1: border-style: value1 value2 value3 value4;

- Ví dụ: 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            border-style:dotted solid double dashed;
        }
    </style>
</head>
<body>
    <div>
        - Đường viền phía trên có kiểu là dotted<br>
        - Đường viền bên phải có kiểu là solid<br>
        - Đường viền phía dưới có kiểu là double<br>
        - Đường viền bên trái có kiểu là dashed
    </div>
</body>
</html>
- Kết quả
Cú pháp 2: border-style: value1 value2 value3;
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            border-style:dotted solid double;
        }
    </style>
</head>
<body>
    <div>
           - Đường viền phía trên có kiểu dotted<br>
           - Đường viền bên trái và bên phải có kiểu solid<br>
           - Đường viền phía dưới có kiểu double
    </div>
</body>
</html>

Cú pháp 3: border-style: value1 value2; 
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            border-style:dotted solid;
        }
    </style>
</head>
<body>
    <div>
        - Đường viền phía trên và dưới có kiểu dotted<br>
        - Đường viền bên trái và bên phải có kiểu solid
    </div>
</body>
</html>

IV. Thuộc tính border-radius

Thuộc tính border-radius được bổ sung vào CSS 3, radius có nghĩa là bán kính. Thuộc tính này có tác dụng bẻ cong 4 góc của đường viền. 

- Cú pháp 1: border-radius: value1 value2 value3 value4; Tương ứng với các góc: trái trên, phải trên, trái dưới, phải dưới.
- Cú pháp 2: border-radius: value1 value2 value3; Tương ứng với các góc: trái trên, phải trên + phải dưới, trái dưới.
Cú pháp 3: border-radius: value1 value2; Tương ứng với các góc: 2 góc bên trên, 2 góc bên dưới.
- Cú pháp 4border-radius: value; Tương ứng với cả 4 góc

Ví dụ 1: border-radius: 10px 20px 30px 40px;
Kết quả: các góc đã bị bẻ cong

Ví dụ 2: mình sẽ cho chiều rộng, chiều dài và chỉ số border-radius bằng nhau
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            border:6px solid red;
            border-radius:500px;
        }
    </style>
</head>
<body>
    <div>    
    </div>
</body>
</html>
Kết quả: trở thành 1 hình tròn



SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!