Giới thiệu
Border ở tất cả các hướng.
Border dưới màu đỏ.
Border được bo tròn.
Border trái màu xanh.
CSS Border Style
Thuộc tính border-style chỉ định loại border sẽ hiển thị.
Các giá trị sau được cho phép:
dotted- Xác định đường viền có dấu chấmdashed- Xác định đường viền đứt nétsolid- Xác định một đường viền vững chắcdouble- Xác định đường viền képgroove- Xác định đường viền có rãnh 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnridge- Xác định đường viền 3D. Hiệu ứng phụ thuộc vào giá trị màu viềninset- Xác định đường viền in 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnoutset- Xác định đường viền ban đầu 3D. Hiệu ứng phụ thuộc vào giá trị màu viềnnone- Xác định không có đường viềnhidden- Xác định một đường viền ẩn
Thuộc tính border-style có thể có từ một đến bốn giá trị (đối với đường viền trên cùng, đường viền bên phải, đường viền dưới cùng và đường viền bên 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-style: dotted dashed solid double;}
CSS Border Width
Thuộc tính border-width chỉ định chiều rộng của bốn đường viền. Chiều rộng có thể được đặt thành một kích thước cụ thể (tính bằng px, pt, cm, em, v.v.) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: thin, medium, hoặc thick:
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: dotted; border-width: 2px; } p.four { border-style: dotted; border-width: thick; }Xác định Width ở mỗi hướng
p.one { border-style: solid; border-width: 5px 20px; } p.two { border-style: solid; border-width: 20px 5px; } p.three { border-style: solid; border-width: 25px 10px 4px 35px; }
CSS Border Color
Thuộc tính border-color được sử dụng để đặt màu của bốn đường viền. Màu sắc có thể được thiết lập bởi:
- Tên màu - ví dụ như "red"
- Giá trị HEX - ví dụ như "# ff0000"
- Giá trị RGB - ví dụ như "rgb (255,0,0)"
Lưu ý: Nếu border-color không được đặt, nó sẽ kế thừa màu của element.
p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: dotted; border-color: blue; }Xác định color ở mỗi hướng
p.one { border-style: solid; border-color: red green blue yellow; }HEX Values
Màu của đường viền cũng có thể được chỉ định bằng giá trị thập lục phân (HEX):
p.one { border-style: solid; border-color: #ff0000; /* red */ }
RGB Values
Hoặc bằng cách sử dụng các giá trị RGB:
p.one { border-style: solid; border-color: rgb(255, 0, 0); /* red */ }
HSL Values
Bạn cũng có thể sử dụng các giá trị HSL:
p.one { border-style: solid; border-color: hsl(0, 100%, 50%); /* red */ }
CSS Border - Individual Sides
Trong CSS, cũng có các thuộc tính để chỉ định từng border (trên, phải, dưới và trái):
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }Ví dụ trên cho kết quả tương tự như sau:
p { border-style: dotted solid; }
Vì vậy, đây là cách nó hoạt động: Nếu thuộc tính border-style có bốn giá trị:
- border-style: dotted solid double dashed;
- top border: dotted
- right border: solid
- bottom border: double
- left border: dashed
Nếu thuộc tính border-style có ba giá trị:
- border-style: dotted solid double;
- top border: dotted
- right và left borders: solid
- bottom border: double
Nếu thuộc tính border-style có hai giá trị:
- border-style: dotted solid;
- top và bottom borders: dotted
- right và left borders: solid
Nếu thuộc tính border-style có một giá trị:
- border-style: dotted;
- tất cả 4 hướng borders: dotted
/* 4 values */ p { border-style: dotted solid double dashed; } /* 3 values */ p { border-style: dotted solid double; } /* 2 values */ p { border-style: dotted solid; } /* 1 value */ p { border-style: dotted; }CSS Border - Shorthand Property
Giống như bạn đã thấy trong trang trước, có nhiều thuộc tính cần xem xét khi xử lý border.
Để rút ngắn code, cũng có thể chỉ định tất cả các thuộc tính border riêng lẻ trong một thuộc tính.
Thuộc tính border là một thuộc tính shorthand cho các thuộc tính border riêng lẻ sau:
border-widthborder-style(bắt buộc)border-color
p { border: 5px solid red; }Bạn cũng có thể chỉ định tất cả các thuộc tính border riêng lẻ chỉ cho một mặt:
p { border-left: 6px solid red; }Bottom border
p { border-bottom: 6px solid red; }
CSS Rounded Borders
Thuộc tính border-radius được sử dụng để thêm đường viền tròn vào một element:
Normal border
Round border
Rounder border
Roundest border
p { border: 2px solid red; border-radius: 5px; }