CSS Borders
13/05/2019
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 hidden.
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é.
