border-right
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính viết tắt border-right trong CSS đặt tất cả các thuộc tính của đường viền phía phải của một phần tử.
Try it
border-right: solid;
border-right: dashed red;
border-right: 1rem solid;
border-right: thick double #32a1ce;
border-right: 4mm ridge rgb(211 220 50 / 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
Thuộc tính thành phần
Thuộc tính này là dạng viết tắt cho các thuộc tính CSS sau:
Cú pháp
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;
/* Giá trị toàn cục */
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;
Ba giá trị của thuộc tính viết tắt có thể được chỉ định theo bất kỳ thứ tự nào, và một hoặc hai trong số chúng có thể được bỏ qua.
Giá trị
Mô tả
Giống như tất cả các thuộc tính viết tắt, border-right luôn đặt giá trị cho tất cả các thuộc tính mà nó có thể đặt, ngay cả khi chúng không được chỉ định. Những thuộc tính không được chỉ định sẽ được đặt về giá trị mặc định của chúng. Hãy xem xét đoạn code sau:
border-right-style: dotted;
border-right: thick green;
Nó thực sự giống như đoạn này:
border-right-style: dotted;
border-right: none thick green;
Giá trị của border-right-style được đặt trước border-right sẽ bị bỏ qua. Vì giá trị mặc định của border-right-style là none, không chỉ định phần border-style sẽ dẫn đến không có đường viền.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements. It also applies to ::first-letter. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
Cú pháp hình thức
border-right =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Ví dụ
Áp dụng đường viền phải
HTML
<div>This box has a border on the right side.</div>
CSS
div {
border-right: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |