CSS Borders

13/05/2019

Bài sau » « Bài trước

Thuộc tính CSS border dùng để chỉ định style, width và color cho border của phần tử HTML.

Border style

Thuộc tính border-style mô tả loại border hiển thị. Dưới đây là danh sách các loại border:

  • dotted - border dạng dấu chấm
  • dashed - border dạng nét đứt
  • solid - border dạng đường thẳng
  • double - border dạng 2 đường thẳng song song.
  • groove - border có đường rãnh 3D. Hiệu ứng phụ thuộc màu của border-color.
  • ridge - border dạng ridge 3D. Hiệu ứng phụ thuộc màu của border-color.
  • inset - border có bóng bên trong 3D. Hiệu ứng phụ thuộc màu của border-color.
  • outset - border có bóng bên ngoài 3D. Hiệu ứng phụ thuộc màu của border-color.
  • none - Không hiển thị border.
  • hidden - Định nghĩa border ẩn.

Thuộc tính border-style có từ 1 đến 4 giá trị theo thứ tự từ trên, phải, dưới và 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 {border-style: dotted dashed solid double;}

Và kết quả hiển thị:

Border dạng dotted.

Border dạng dashed.

Border dạng solid.

Border dạng double.

Border dạng groove.

Border dạng ridge.

Border dạng inset.

Border dạng outset.

Border dạng none. Không có border

Border dạng hỗ hợp.

Chú ý: Nếu thuộc tính border-style không được khai báo, thì các thuộc tính border-width , border-color không có tác dụng, không hiển thị.

Border width

Thuộc tính border-width chỉ định độ rộng (width) của border.

Độ rộng của border được qui định bởi kích thước cụ thể (các đơn vị có thể sử dụng là px, pt, em, rem,...) hoặc sử dụng 1 trong 3 thuộc tính định nghĩa sẵn: thin, medium hoặc thick.

Thuộc tính border-width có từ 1 đến 4 giá trị theo thứ tự trên, phải, dưới và trái.

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

Kết quả hiển thị:

5px border.

medium border.

border có 4 giá trị khác nhau.

Border color

Thuộc tính border-color dùng để chỉ định màu sắc của border. 

Màu sắc được khai báo theo: 

  • name - Theo tên màu tiếng anh quốc tế (red, blue, green,...)
  • HEX - Theo hệ màu hex (#ff0000, #000000,...)
  • RGB - Theo hệ màu rgb - rgb(50,50,50)
  • transparent - Màu nền trong suốt

Hoặc xem lại thuộc tính CSS colors

Thuộc tính border-color có từ 1 đến 4 giá trị theo thứ tự từ trên, phải, dưới và trái.

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

Chú ý: Nếu thuộc tính border-color để trống, thì nó sẽ lấy theo màu sắc của phần tử HTML.

Cú pháp border ngắn gọn

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

- Ví dụ trên và dưới đây cùng cho ra kết quả giống nhau :

p { border-style: dotted solid; }

- Nếu thuộc tính border-style có 4 thuộc tính :

border-style: dotted solid double dashed;

  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

- Nếu thuộc tính border-style có 3 thuộc tính :

border-style: dotted solid double;

  • top border is dotted
  • right và left border is solid
  • bottom border is double

- Nếu thuộc tính border-style có 2 thuộc tính :

border-style: dotted solid;

  • top và bottom border is dotted
  • right và left border is solid

- Nếu thuộc tính border-style có 1 thuộc tính :

border-style: dotted;

  • all border is dotted

Ngoài ra, thuộc tính border là thuộc tính ngắn gọn, nó gom lại từ 3 thuộc tính riêng rẽ ở trên. Cú pháp:

border: border-width border-style border-color;

p { border: 5px solid red; }

Kết quả:

border: 5px solid red;

Bạn có thể chỉ định border cụ thể cho top, right, bottom hoặc left .

p { border-left: 5px solid blue; } p { border-right: 5px solid blue; } p { border-top: 5px solid blue; } p { border-bottom: 5px solid blue; }

Kết quả:

Chỉ định border riêng cho left.

Chỉ định border riêng cho right.

Chỉ định border riêng cho top.

Chỉ định border riêng cho bottom.

Border radius

Thuộc tính border-radius dùng để tạo viền tròn cho border. Cú pháp: border-radius: value; . Trong đó, value là giá trị cụ thể theo đơn vị (px, pt, em, rem,...) hoặc theo % .

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

Kết quả:

Demo thuộc tính border-radius

Chú ý: Thuộc tính border-radius không hỗ trợ cho IE8 trở về trước.

Trên đây là tổng quan về thuộc tính CSS borders, nếu có thắc mắc gì các bạn cứ comment bên dưới nhé.

Bài sau » « Bài trước
Back to top