Thuộc tính border-top style được dùng để chỉ định kiểu cho đường viền trên.
Cú pháp:
border-top-style: none | dotted | dashed | solid | groove | inset |
outset | ridge | double | hidden | initial | inherit;
Giá trị mặc định: Giá trị mặc định là none.
Giá trị thuộc tính
None: Đây là giá trị mặc định làm cho chiều rộng viền trên bằng không. Do đó, nó sẽ không hiển thị.Cú pháp:
border-top-style:none;
Ví dụ 1:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: none;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Dotted: Được sử dụng để tạo viền trên bằng một loạt các dấu chấm.Cú pháp:
border-top-style:dotted;
Ví dụ 2:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: dotted;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Dashed: Tạo viền trên bằng một loạt các đoạn thẳng ngắn.Cú pháp:
border-top-style:dashed;
Ví dụ 3:
html<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: dashed;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Đầu ra:
Solid: Được sử dụng để tạo viền trên bằng một đoạn thẳng liền nét.Cú pháp:
border-top-style:solid;
Ví dụ 4:
html<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: solid;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Đầu ra:
Groove: Tạo viền trên với một rãnh, khiến ta cảm thấy nó lõm vào.Cú pháp:
border-top-style:groove;
Ví dụ 5:
html<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: groove;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Đầu ra:
Inset: Tạo viền trên với một đoạn thẳng được nhúng, khiến ta cảm thấy nó được cố định sâu trên màn hình.Cú pháp:
border-top-style:inset;
Ví dụ 6:
html<!DOCTYPE html>
<html>
<head>
<title>CSS | border-top-style Property</title>
<style>
h3.a {
border-top-style: inset;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks</h3>
</body>
</html>
Đầu ra:
Outset: Ngược lại với inset. Nó tạo viền trên với một đoạn thẳng, có vẻ như nó nhô ra.Cú pháp:
border-top-style:outset;
Ví dụ 7:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: outset;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Ridge: Ngược lại với groove. Nó tạo viền trên với một gờ nổi, khiến ta cảm thấy nó nhô ra.Cú pháp:
border-top-style:ridge;
Ví dụ 8:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: ridge;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Double: Tạo viền trên với một đường đôi liền nét. Chiều rộng viền trong trường hợp này bằng tổng chiều rộng hai đoạn thẳng và khoảng trống giữa chúng.Cú pháp:
border-top-style:double;
Ví dụ 9:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: double;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Hidden: Dùng để làm cho viền trên vô hình, giống như none, ngoại trừ trường hợp giải quyết xung đột viền của các phần tử bảng.Cú pháp:
border-top-style:hidden;
Ví dụ 10:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3.a {
border-top-style: hidden;
}
</style>
</head>
<body>
<h3 class="a">GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Initial: Được sử dụng để đặt giá trị mặc định của phần tử.Cú pháp:
border-top-style:initial;
Ví dụ 11
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3 {
border-top-style: initial;
}
</style>
</head>
<body>
<h3>GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Inherit: Làm cho thuộc tính top-border-style được kế thừa từ phần tử cha của nó.Cú pháp:
border-top-style:inherit;
Ví dụ 12
:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | border-top-style Property
</title>
<style>
h3 {
border-top-style: inherit;
}
body {
border-top-style: dotted;
}
</style>
</head>
<body>
<h3>GeeksforGeeks </h3>
</body>
</html>
Đầu ra:
Lưu ý:
Thuộc tính này là cần thiết khi sử dụng thuộc tính border-top.
Trình duyệt được hỗ trợ:
Các trình duyệt được hỗ trợ bởi border-top-style Property được liệt kê dưới đây:
- Google Chrome 1
- Edge 12
- Mozilla Firefox 1
- Internet Explorer 5.5
- Opera 9.2
- Safari 1