border

Try it

border: solid;

border: dashed red;

border: 1rem solid;

border: thick double #32a1ce;

border: 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;
}

Các 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:

• border-width
• border-style
• border-color

Cú pháp

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #ff3333;

/* width | style | color */
border: medium dashed green;

/* Giá trị toàn cục */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

Thuộc tính border có thể được chỉ định bằng một, hai hoặc ba trong số các giá trị được liệt kê bên dưới. Thứ tự các giá trị không quan trọng.

Giá trị

<line-width>

Đặt độ dày của đường viền. Mặc định là medium nếu không có. Xem border-width.

<line-style>

Đặt kiểu đường viền. Mặc định là none nếu không có. Xem border-style.

<color>

Đặt màu đường viền. Mặc định là currentColor nếu không có. Xem border-color.

Mô tả

Như với tất cả thuộc tính viết tắt, bất kỳ giá trị con nào bị bỏ qua sẽ được đặt về giá trị ban đầu. Quan trọng là, border không thể được dùng để chỉ định giá trị tùy chỉnh cho border-image, mà thay vào đó sẽ đặt nó về giá trị ban đầu, tức là none.

Thuộc tính viết tắt border đặc biệt hữu ích khi bạn muốn tất cả bốn đường viền đều giống nhau. Để làm chúng khác nhau, tuy nhiên, bạn có thể dùng các thuộc tính dạng dài border-width, border-style, và border-color, chấp nhận các giá trị khác nhau cho mỗi cạnh. Ngoài ra, bạn có thể nhắm vào một đường viền tại một thời điểm với các thuộc tính vật lý (ví dụ: border-top) và logic (ví dụ: border-block-start).

Đường viền và outline

Đường viền và outline rất giống nhau. Tuy nhiên, outline khác với đường viền theo các cách sau:

• Outline không chiếm không gian vì chúng được vẽ bên ngoài nội dung của phần tử.
• Theo thông số kỹ thuật, outline không nhất thiết phải là hình chữ nhật, mặc dù chúng thường là.

Định nghĩa chính thức

Cú pháp chính thức

border = 
  <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ụ

Đặt đường viền outset màu hồng

HTML

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• border-width
• border-style
• border-color
• outline
• Backgrounds and borders
• Learn CSS: Backgrounds and borders