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