CSS Borders

Giới thiệu

CSS Border Style

Thuộc tính border-style chỉ định loại border sẽ hiển thị.

Các giá trị sau được cho phép:

• dotted - Xác định đường viền có dấu chấm
• dashed - Xác định đường viền đứt nét
• solid -  Xác định một đường viền vững chắc
• 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

Thuộc tính border-style  có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên trái):

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

 

CSS Border Width

Thuộc tính border-width chỉ định chiều rộng của bốn đường viền. Chiều rộng có thể được đặt thành một 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:

p.one {    border-style: solid;    border-width: 5px;  }    p.two {    border-style: solid;    border-width: medium;  }    p.three {    border-style: dotted;    border-width: 2px;  }    p.four {    border-style: dotted;    border-width: thick;  }

 

Xác định Width ở mỗi hướng

p.one {    border-style: solid;    border-width: 5px 20px;  }    p.two {    border-style: solid;    border-width: 20px 5px;   }    p.three {    border-style: solid;    border-width: 25px 10px 4px 35px;   }

 

CSS Border Color

Thuộc tính border-color được sử dụng để đặt màu của bốn đường viền. Màu sắc có thể được thiết lập bởi:

• Tên màu - ví dụ như "red"
• Giá trị HEX - ví dụ như "# ff0000"
• Giá trị RGB - ví dụ như "rgb (255,0,0)"

Lưu ý: Nếu border-color không được đặt, nó sẽ kế thừa màu của element.

p.one {    border-style: solid;    border-color: red;  }    p.two {    border-style: solid;    border-color: green;  }    p.three {    border-style: dotted;    border-color: blue;  }

 

Xác định color ở mỗi hướng

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

 

HEX Values

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):

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

 

RGB Values

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

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

 

HSL Values

Bạn cũng có thể sử dụng các giá trị HSL:

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

 

CSS Border - Individual Sides

Trong CSS, cũng có các thuộc tính để chỉ định từng border (trên, phải, dưới và trái):

p {    border-top-style: dotted;    border-right-style: solid;    border-bottom-style: dotted;    border-left-style: solid;  }

Ví dụ trên cho kết quả tương tự như sau:

p {    border-style: dotted solid;  }

 

Vì vậy, đây là cách nó hoạt động: Nếu thuộc tính border-style có bốn giá trị:

• border-style: dotted solid double dashed;
  • top border: dotted
  • right border: solid
  • bottom border: double
  • left border: dashed

Nếu thuộc tính border-style có ba giá trị:

• border-style: dotted solid double;
  • top border: dotted
  • right và left borders: solid
  • bottom border: double

Nếu thuộc tính border-style có hai giá trị:

• border-style: dotted solid;
  • top và bottom borders: dotted
  • right và left borders: solid

Nếu thuộc tính border-style có một giá trị:

• border-style: dotted;
  • tất cả 4 hướng borders: dotted

/* 4 values */  p {    border-style: dotted solid double dashed;  }    /* 3 values */  p {    border-style: dotted solid double;  }    /* 2 values */  p {    border-style: dotted solid;  }    /* 1 value */  p {    border-style: dotted;  }

 

CSS Border - Shorthand Property

Giống như bạn đã thấy trong trang trước, có nhiều thuộc tính cần xem xét khi xử lý border.

Để rút ngắn code, cũng có thể chỉ định tất cả các thuộc tính border riêng lẻ trong một thuộc tính.

Thuộc tính border là một thuộc tính shorthand cho các thuộc tính border riêng lẻ sau:

• border-width
• border-style (bắt buộc)
• border-color

p {    border: 5px solid red;  }

Bạn cũng có thể chỉ định tất cả các thuộc tính border riêng lẻ chỉ cho một mặt:

p {    border-left: 6px solid red;  }

Bottom border

p {    border-bottom: 6px solid red;  }

 

CSS Rounded Borders

Thuộc tính border-radius được sử dụng để thêm đường viền tròn vào một element:

Normal border

Round border

Rounder border

Roundest border

p {    border: 2px solid red;    border-radius: 5px;  }