Đường Viền

Thuộc Tính Border

Thuộc tính border trong CSS được dùng để tạo đường viền cho phần tử. Sử dụng thuộc tính border chúng ta có thể gán giá trị cho một hoặc nhiều thuộc tính khác như độ rộng đường viền (border-width), kiểu đường viền (border-style) và àu sắc đường viền (border-color) của phần tử.

  selector {      border: border-width, border-style, border-color;  }

Ví dụ:

  p {      border: 2px solid #333;  }

Kiểu Đường Viền

Thuộc tính border-style được sử dụng để tạo kiểu cho đường viền.

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

Bạn cũng có thể tạo các kiểu đường viền khác nhau cho viền trên, viền phải, viền dưới, viền trái bằng cách gán đồng thời các giá trị này theo thứ tự lần lượt như vừa liệt kê.

  p.mix {      border-style: dotted dashed solid double;  }

Độ Rộng Đường Viền

Thuộc tính border-width được sử dụng để tạo độ rộng cho đường viền. Giá trị của thuộc tính này có thể được gán sử dụng đơn vị là pixel, cm, pt (point)... Hoặc sử dụng các đơn vị đo mặc định của trình duyệt như: thin, medium hoặc thick.

  p.first {      border-style: solid;      border-width: 5px;  }    p.second {      border-style: solid;      border-width: medium;  }    p.third {      border-style: solid;      border-width: 2px 10px 4px 20px;  }

Màu Đường Viền

Thuộc tính border-color được sử dụng để tạo màu cho đường viền. Khi gán giá trị màu cho thuộc tính này có thể dùng:

• Màu theo tên như black, blue, red...
• Màu Hex như #000, #ccc...
• Màu RBG như rgb(0, 0, 0), rgb(255,0 , 0)...

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

Tương tự như thuộc tính border-style, bạn cũng có thể gán các giá trị khác nhau cho màu của viền trên, viền phải, viền dưới và viền trái.

  p.three {      border-style: solid;      border-width: 2px 10px 4px 20px;  }

Viền Riêng Lẻ

Bạn cũng có thể sử dụng một hoặc nhiều thuộc tính sau để tạo viền riêng lẻ cho phần tử:

• Thuộc tính border-top: Dùng để tạo viền trên cùng cho phần tử
• Thuộc tính border-bottom: Tạo viền dười cho phần tử.
• Thuộc tính border-left: Tạo viền trái cho phần tử.
• Thuộc tính border-right: Tạo viền phải cho phần tử.

Ví dụ:

  p.top {      border-top: 1px solid #333;  }  p.left {      border-left: 1px solid #ccc;  }