CSS border-style: Kiểu viền

Thuộc tính CSS border-style được dùng để chỉ định kiểu viền cho một phần tử. Cũng có thể định nghĩa border-style cho từng cạnh riêng lẻ: border-top-style, border-right-style, border-bottom-style, border-left-style.

Cú pháp

selector {
    border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
}

Các giá trị border-style

Giá trị	Hiển thị	Mô tả
`none`	Không viền	Mặc định, không chiếm diện tích
`hidden`	Không viền	Giống none, nhưng ưu tiên cao trong table collapse
`dotted`	●●●●●	Chấm tròn
`dashed`	── ── ──	Nét đứt
`solid`	────────	Nét liền (phổ biến nhất)
`double`	════════	Hai nét liền, cần width ≥ 3px
`groove`	▽▽▽▽▽	Hiệu ứng 3D rãnh (đúc lõm)
`ridge`	△△△△△	Hiệu ứng 3D cạnh (đúc nổi) - ngược groove
`inset`	□□□□□	Hiệu ứng 3D chìm vào trong
`outset`	□□□□□	Hiệu ứng 3D nổi ra ngoài - ngược inset

Ví dụ 1: Solid, double dashed, dotted

<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type { margin: 5% 0 0 20%; }
div {
    height: 40px; width: 40px;
    margin: auto; padding: 10px;
    border-style: solid;
    display: flex; float: left;
}
#d1 { border-style: double dashed; } /* top/bottom double | left/right dashed */
#d2 { border-style: dotted; }
</style>
</head>
<body>
<div></div> <!-- solid -->
<div id="d1"></div> <!-- double dashed -->
<div id="d2"></div> <!-- dotted -->
</body>
</html>

Ví dụ 2: Ridge vs Double + border-width/color/radius

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 20px; float: left;
    height: 80px; width: 60px;
    border-style: ridge;
    border-width: 1.2em;
    border-color: midnightblue;
    border-bottom-left-radius: 50%;
}
div + div {
    height: 120px; width: 80px;
    border-style: double;
    border-color: seagreen;
    border-right-width: 180px; /* Rộng cạnh phải */
    border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

Shorthand: border

border: 2px solid red;              /* Tất cả cạnh */
border-top: 1px dotted blue;
border-right: 2px dashed green;
border-bottom: 3px solid yellow;
border-left: 4px double orange;

Logical Properties (Modern)

border-block-start-style: solid;
border-block-end-style: dashed;
border-inline-start-style: dotted;
border-inline-end-style: double;

Lưu ý

border-style: none → border-width tính như 0
double cần border-width ≥ 3px mới hiện rõ 2 nét
groove/ridge/inset/outset hiệu ứng 3D phụ thuộc vào border-color (tự tính sáng/tối)
Để border-radius hoạt động với double/groove/ridge: cần width đủ lớn