Tidadigi Logo

CSS border-style Property

Thuộc tính CSS border-style được dùng để thiết lập kiểu viền cho phần tử. Đây là thuộc tính shorthand cho cả bốn cạnh.

Note: Thuộc tính border-style có thể nhận Một đến Bốn giá trị cùng một lúc.

Default Value: none

CSS border-style Property Syntax:

border-style: value;

CSS border-style Property Values:

  • none: Không tạo viền, vùng đó sẽ hoàn toàn trống.
  • hidden: Tương tự none, không hiển thị viền trừ khi có ảnh nền. Khi đó border-top-width sẽ là 0.
  • dotted: Hiển thị một loạt các dấu chấm trên đường viền.
  • solid: Sử dụng một đường liền nét, đậm làm đường viền.
  • dashed: Sử dụng một loạt các đường gạch ngang vuông làm đường viền.
  • double: Hai đường thẳng song song nhau tạo thành đường viền.
  • groove: Hiển thị viền dạng rãnh 3D, hiệu ứng phụ thuộc vào giá trị border-color.
  • ridge: Hiển thị viền dạng gờ nổi 3D, hiệu ứng phụ thuộc vào giá trị border-color.
  • inset: Hiển thị viền dạng lõm 3D, hiệu ứng phụ thuộc vào giá trị border-color.
  • outset: Hiển thị viền dạng lồi 3D, hiệu ứng phụ thuộc vào giá trị border-color.

CSS border-style property is a shorthand for:

Các ví dụ dưới đây minh họa cách sử dụng thuộc tính border-style.

CSS border-style property Example :

Ví dụ này sử dụng thuộc tính CSS border-style chỉ với một giá trị cho tất cả các viền.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Dotted Borders</title>
    <style>
    .GFG {
        border-style: dotted;
        border-width: 6px;
        background: #009900;
        padding: 30px;
        text-align: center;
        width: 300px;
        height: 120px;
    }
    </style>
</head>

<body>
    <div class="GFG">
    <h2>GeeksforGeeks</h2> </div>
</body>
  
</html>

Output:

css-border-style-property

CSS border-style property Example Explanation:

Đây là giải thích của ví dụ trên.

  • Chúng ta có một file HTML với viền chấm và nền xanh lá cây. Nội dung bên trong là một tiêu đề căn giữa.
  • CSS định nghĩa viền chấm, nền xanh lá cây và văn bản căn giữa. Tất cả nằm trong một vùng chứa kích thước cố định.

CSS border-style property example with multiple values:

Thuộc tính CSS border-style chấp nhận nhiều giá trị để định nghĩa các kiểu khác nhau cho mỗi cạnh của viền.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title>Dotted Borders</title>
    <style>
    .GFG {
        border-style: solid double dashed dotted;
        border-width: 6px;
        background: #009900;
        padding: 30px;
        text-align: center;
        width: 300px;
        height: 120px;
    }
    </style>
</head>

<body>
    <div class="GFG">
    <h2>GeeksforGeeks</h2> </div>
</body>
  
</html>

Output:

css-border-style-property

CSS border-style property with multiple values Example Explanation:

Đây là cách triển khai ví dụ trên.

  • Chúng ta có một div với 4 kiểu viền khác nhau.
  • Chúng ta nhắm mục tiêu viền div bằng cách sử dụng bộ chọn id.
  • Chúng ta sử dụng border-style với nhiều giá trị. solid là trên cùng, double là phải, dashed là dưới cùng và dotted là bên trái của div.

CSS border-style Property Use Cases:

. How to create and style border using CSS ?

Chúng ta có thể sử dụng các thuộc tính viền như style, width và color để tạo và định kiểu viền trong CSS.

. How to create a Border around an HTML Element using CSS ?

Chúng ta có thể dùng các thuộc tính CSS như border-style, border-width và border-color để tạo viền quanh các phần tử HTML.

to

Các trình duyệt được hỗ trợ bởi border-style Property được liệt kê dưới đây:

  • Chrome 1.0
  • Edge 12.0
  • IE 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

Last Updated : 21/07/2025