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

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.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: 1px; }
p.inset {border-style: inset;}
p.outset {border-style: outset;} 
p.none {border-style: none; border-width: 10px; }

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.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.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.t1 {
  border: 10px solid red;
}

hoặc

p.t1 {
  border: 10px solid #ff0004;
}

Và kết quả là:

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

Chia sẻ bài viết

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

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon