Thuộc tính border-style trong CSS

1) Thuộc tính border-style trong CSS

– Thuộc tính border-style dùng để thiết lập một đường viền cho phần tử HTML, đồng thời xác định kiểu của đường viền.

– Ví dụ:

2) Cách sử dụng thuộc tính border-style trong CSS

– Để sử dụng thuộc tính border-style, ta dùng cú pháp như sau:

border-style: none|solid|dashed|dotted|double|groove|ridge|inset|outset|initial|inherit;

– Trong đó, ta thấy giá trị thuộc tính border-style có thể được xác định bởi một trong mười một loại:

3) Xác định kiểu đường viền ở từng cạnh

– Khi chúng ta sử dụng thuộc tính border-style với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn cạnh của phần tử sẽ có chung một kiểu đường viền.

– Tuy nhiên, nếu muốn mỗi cạnh của phần tử có một kiểu riêng biệt (giống ví dụ bên dưới), thì ta phải làm như thế nào !?

Để xác định kiểu đường viền ở từng cạnh thì ta có một số cú pháp như sau:

3.1) Cú pháp 1

border-style: value1 value2 value3 value 4;

Đường viền phía trên của phần tử sẽ có kiểu là value1
Đường viền phía bên phải của phần tử sẽ có kiểu là value2
Đường viền phía dưới của phần tử sẽ có kiểu là value3
Đường viền phía bên trái của phần tử sẽ có kiểu là value4

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
            border-style:dotted solid double none;
        }
    </style>
</head>
<body>
    <div>
        - Đường viền phía trên của phần tử này có kiểu là dotted<br>
        - Đường viền phía bên phải của phần tử này có kiểu là solid<br>
        - Đường viền phía dưới của phần tử này có kiểu là double<br>
        - Đường viền phía bên trái của phần tử này có kiểu là none
    </div>
</body>
</html>

3.2) Cú pháp 2

border-style: value1 value2 value3;

Đường viền phía trên của phần tử sẽ có kiểu là value1
Đường viền phía bên trái và phía bên phải của phần tử sẽ có kiểu là value2
Đường viền phía dưới của phần tử sẽ có kiểu là value3

Ví dụ:

<!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ủa phần tử này có kiểu dotted<br>
        - Đường viền phía bên trái & phải của phần tử này có kiểu solid<br>
        - Đường viền phía dưới của phần tử này có kiểu double
    </div>
</body>
</html>

3.3) Cú pháp 3

border-style: value1 value2;

Đường viền phía trên và phía dưới của phần tử sẽ có kiểu là value1
Đường viền phía bên trái và phía bên phải của phần tử sẽ có kiểu là value2

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div{
           border-style:dotted solid;
        }
    </style>
</head>
<body>
    <div>
        - Đường viền phía trên & dưới của phần tử này có kiểu dotted<br>
        - Đường viền phía bên trái & phải của phần tử này có kiểu solid<br>
    </div>
</body>
</html>

Mr4 Java Developer

Đi lên từ nền tảng vững chắc!

Thuộc tính border-style trong CSS

1) Thuộc tính border-style trong CSS

2) Cách sử dụng thuộc tính border-style trong CSS

3) Xác định kiểu đường viền ở từng cạnh

3.1) Cú pháp 1

3.2) Cú pháp 2

3.3) Cú pháp 3

Hãy bình luận đầu tiên

Để lại một phản hồi Hủy