CSS Borders

Thuộc tính CSS border cho phép chúng ta chỉ định kiểu, chiều rộng và màu sắc của đường viền của một phần tử HTML.

Tôi có đường viền ở tất cả các bên.

Tôi có đường viền bên dưới màu đỏ.

Tôi có đường viền với bốn góc bo tròn.

Tôi có đường viền bên trái màu xanh dương

CSS Border Style


Thuộc tính border-style quy định cụ thể các kiểu border hiển thị ra ngoài màn hình.

Thuộc tính border-style có các giá trị như sau:

  • dotted - Xác định một đường viền chấm
  • dashed - Xác định đường viền đứt nét
  • solid - Xác định một đường viền liền mạch
  • double - Xác định đường viền kép
  • groove - Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • ridge - Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • inset - Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • outset - Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
  • none - Xác định không có đường viền
  • hidden - Xác định một đường viền ẩn

Ví dụ

<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>

Xem kết quả

CSS Border Width


Thuộc tính border-width quy định độ rộng của đường viền.

Chiều rộng border có thể được xác định bằng một đơn vị đo kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: thin, medium hoặc thick.

Ví dụ

p.one {
  border-style: solid;
  border-width: 5px;
}

Xem kết quả

Chiều rộng các đường viền cụ thể

Thuộc tính border-width cũng có thể chỉ xác định từ một đến bốn giá trị (đối với border-top, border-right, border-bottom, và border-left).

Ví dụ

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px trên và dưới, 20px trái và phải */
}

Xem kết quả

CSS Border Color


Thuộc tính border-color được sử dụng để thiết lập màu sắc cho bốn đường viền.

Màu có thể được chỉ định bằng cách:

  • Tên màu - chỉ định tên màu, chẳng hạn như "red"
  • HEX - chỉ định một giá trị HEX, như "#ff0000"
  • RGB - chỉ định một giá trị RGB, như "rgb(255,0,0)"
  • HSL - chỉ định một giá trị HSL, như "hsl(0, 100%, 50%)"
  • Độ trong suốt
Lưu ý: Nếu border-color không được thiết lập, nó sẽ kế thừa màu của phần tử HTML.

Ví dụ

p.one {
  border-style: solid;
  border-color: red;
}

Xem kết quả

Màu đường viền cụ thể

Thuộc tính border-color cũng có thể chỉ định màu cho từ một đến bốn giá trị border (đối với border-top, border-right, border-bottom, và border-left).

Ví dụ

<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red trên, green phải, blue dưới, yellow trái */
}
</style>

Xem kết quả

Giá trị HEX

Màu của đường viền cũng có thể được chỉ định bằng giá trị thập lục phân (HEX)

Ví dụ

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

Xem kết quả

Giá trị RGB

Hoặc bằng cách sử dụng các giá trị RGB.

Ví dụ

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

Xem kết quả

Giá trị HSL

Chúng ta cũng có thể sử dụng các giá trị HSL.

Ví dụ

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

Xem kết quả