Trong CSS, border-bottom-style property được dùng để thiết lập kiểu đường viền dưới của một phần tử.
Cú pháp:
border-bottom-style: none|hidden|dotted|dashed|
solid|double|groove|ridge|inset|
outset|initial|inherit;
Giá trị thuộc tính:
- none: Đây là giá trị mặc định làm cho độ rộng viền dưới bằng không. Do đó, nó sẽ không hiển thị.
- hidden: Được dùng để làm cho viền dưới không hiển thị. Nó tương tự giá trị none trong trường hợp giải quyết xung đột viền của bảng.
- dotted: Tạo viền dưới bằng một loạt các dấu chấm.
- short-line: Tạo viền dưới bằng một loạt các đoạn thẳng ngắn.
- solid: Được dùng để tạo viền dưới bằng một đoạn thẳng liền nét.
- double: Tạo viền dưới là một đường đôi liền nét. Trong trường hợp này, độ rộng viền bằng tổng độ rộng hai đoạn và khoảng trống.
- groove: Tạo viền dưới với một rãnh lõm vào trong. Nó tạo cảm giác như đường viền đang đi vào bên trong.
- inset: Tạo viền dưới với một đoạn thẳng được nhúng vào. Nó tạo cảm giác như đang được cố định sâu vào màn hình.
- outset: Ngược lại với inset, viền dưới lồi ra ngoài. Nó tạo cảm giác như đường viền đang đi ra ngoài.
- initial: Thiết lập thuộc tính border-bottom-style về giá trị mặc định của nó.
- inherit: Thuộc tính border-bottom-style được kế thừa từ phần tử cha.
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style; none;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: none;
}
</style>
</head>
<body>
<!-- border-bottom-style:none; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: hidden;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: hidden;
}
</style>
</head>
<body>
<!-- border-bottom-style:hidden; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: dotted;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: dotted;
}
</style>
</head>
<body>
<!-- border-bottom-style:dotted; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: dashed;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: dashed;
}
</style>
</head>
<body>
<!-- border-bottom-style:dashed; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: solid;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: solid;
}
</style>
</head>
<body>
<!-- border-bottom-style:solid; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: double;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: double;
}
</style>
</head>
<body>
<!-- border-bottom-style:double; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: groove;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: groove;
}
</style>
</head>
<body>
<!-- border-bottom-style:groove; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: inset;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: inset;
}
</style>
</head>
<body>
<!-- border-bottom-style:inset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: outset;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
border: 10px;
border-style: solid;
/* CSS Property for border-bottom-style */
border-bottom-style: outset;
}
</style>
</head>
<body>
<!-- border-bottom-style:outset; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra: 
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: initial;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style property
</title>
<!-- Internal CSS Style Sheet -->
<style>
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property for border-bottom-style */
border-bottom-style: initial;
}
</style>
</head>
<body>
<!-- border-bottom-style:initial; -->
<h1>GeeksForGeeks</h1>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta đang sử dụng thuộc tính border-style: inherit;.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS border-bottom-style Property
</title>
<!-- Internal CSS Style Sheet -->
<style>
div {
border-bottom-style: double;
}
h1 {
color: green;
text-align: center;
border: 5px solid black;
/* CSS Property | border-bottom-style */
border-bottom-style: inherit;
}
</style>
</head>
<body>
<div>
<!-- border-bottom-style: inherit; -->
<h1>GeeksForGeeks</h1>
</div>
</body>
</html>
Đầu ra: 
Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi border-bottom-style property được liệt kê dưới đây:
- Google Chrome 1.0 trở lên
- Edge 12.0 trở lên
- Internet Explorer 5.5 trở lên
- Firefox 1.0 trở lên
- Opera 9.2 trở lên
- Safari 1.0 trở lên