1. Trang chủ
  2. Tài liệu
  3. CSS
  4. Bài 9: Tìm hiểu về border trong CSS

Bài 9: Tìm hiểu về border trong CSS

Border là thuộc tính CSS dùng để tạo đường viền bao quanh nội dung của phần tử HTML, nó nằm giữa padding và margin.

Như hình trên thì ta thấy cách hiển thị các border rất linh động, mình có thể thiết lập màu sắc (color) của border, kích thước (width) của border, kiểu (style) của border.

Từng thuộc tính của border

border-style

Những style chính là border hổ trợ như sau:

  • dotted – border sẽ hiển thị là những dấu chấm
  • dashed – border sẽ hiển thị nét đứt
  • solid – border sẽ hiển thị đường thẳng liền mạch
  • double – border sẽ hiển thị 2 đường thẳng
  • groove – border sẽ hiển thị dạng rãnh 3D.
  • ridge – border sẽ hiển thị dạng viền 3D.
  • inset – border sẽ hiển thị dạng viền trong 3D.
  • outset – border sẽ hiển thị dạng viền đầu 3D.
  • none – sẽ không có border
  • hidden – border sẽ bị ẩn.
p { width: 200px;}
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;}

Từ đoạn css trên, ta có như sau:

Lưu ý: Nếu các bạn không thiết lập giá trị cho thuộc tính border-style thì một số thuộc tính khác của border như border-width, border-color.. sẽ không được áp dụng.

border-width

border-width là thuộc tính để thiết lập độ rộng của border. Các bạn có thể sử dụng CSS Unit như pt, px, em, rem … hoặc là có thể dùng 3 giá trị sau: thin, medium, thick.

p { width: 200px; }
p.dotted {border-style: dotted; border-width: 10px; }
p.dashed {border-style: dashed; border-left-width: 20px; }
p.solid {border-style: solid; border-right-width: thin;  }
p.double {border-style: double; border-width: thick;  }
p.groove {border-style: groove; border-top-width: thin; }
p.ridge {border-style: ridge; border-width: 0px; }
p.inset {border-style: inset;}
p.outset {border-style: outset;} 
p.none {border-style: none; border-width: 10px;  }
p.hidden {border-style: hidden; border-width: 20px; }
p.mix {border-style: dotted;}

Từ đoạn css trên ta có:

border-color

border-color là thuộc tính để thiết lập màu sắc cho border.

p {
     width: 200px;
}
p.dotted {border-style: dotted;
     border-width: 10px;
     border-color: red;
}
p.dashed {border-style: dashed;
      border-left-width: 20px;
      border-color: yellow;
}
p.solid {border-style: solid;
      border-right-width: thin;
      border-left-color: green;
}
p.double {border-style: double;
      border-width: thick;
      border-right-color: #23dd45;
}

Từ đoạn css trên, ta có:

border-radius

border-radius là để thiết lập bo tròn cho border.

p {
  width: 100px;
}
p.round1 {
  border: 2px solid red;
  border-radius: 2px;
}
 
p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}
 
p.round3 {
  border: 2px solid red;
  border-radius: 10px;
}

Từ css trên, ta có như sau:

Gộp chung thuộc tính

Để gộp chung làm gọn CSS border, ta có đoạn CSS sau:

selector {
      border: width style color;
}

Ta sẽ viết như sau:

p {
   width: 200px;
}
p.t1 {
  border: solid red 5px;
}
p.t2 {
  border: 5px solid yellow;
}
p.t3 {
  border: green 5px solid;
}
p.t4 {
  border: 5px solid;
}
p.t5 {
  border: green solid;
}
p.t6 {
  border: green 1px;
}

Và kết quả là:

Chúc các bạn thành công!

Nội dung trên có giúp ích cho bạn? Không

Mình cần giúp đỡ!

Bình luận