border-top
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-top trong CSS đặt tất cả các thuộc tính của đường viền phía trên của một phần tử.
Try it
border-top: solid;
border-top: dashed red;
border-top: 1rem solid;
border-top: thick double #32a1ce;
border-top: 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-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
/* Giá trị toàn cục */
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: 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ị
<br-width>-
Xem
border-top-width. <br-style>-
Xem
border-top-style. <color>-
Xem
border-top-color.
Mô tả
Giống như tất cả các thuộc tính viết tắt, border-top 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-top-style: dotted;
border-top: thick green;
Nó thực sự giống như đoạn này:
border-top-style: dotted;
border-top: none thick green;
Giá trị của border-top-style được đặt trước border-top sẽ bị bỏ qua. Vì giá trị mặc định của border-top-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-top =
<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 trên
HTML
<div>This box has a border on the top side.</div>
CSS
div {
border-top: 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 |