Các thuộc tính đường viền cho phép bạn chỉ định đường viền của hộp đại diện cho một phần tử sẽ trông như thế nào. Có ba thuộc tính của đường viền mà bạn có thể thay đổi –
Màu viền chỉ định màu của đường viền
Kiểu đường viền chỉ định đường viền phải là đường liền nét, đường đứt nét, đường đôi hoặc một trong các giá trị có thể khác
Độ rộng đường viền chỉ định độ rộng của đường viền
Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này với các ví dụ
Thuộc tính màu viền
Thuộc tính màu viền cho phép bạn thay đổi màu của đường viền xung quanh một phần tử. Bạn có thể thay đổi riêng màu sắc của các cạnh dưới cùng, bên trái, trên cùng và bên phải của đường viền của phần tử bằng cách sử dụng các thuộc tính –
border-bottom-color thay đổi màu của viền dưới
border-top-color thay đổi màu của đường viền trên cùng
border-left-color thay đổi màu của viền trái
border-right-color thay đổi màu của viền phải
Ví dụ sau đây cho thấy tác dụng của tất cả các thuộc tính này -
This example is showing all borders in different colors.
This example is showing all borders in green color only.
Nó sẽ tạo ra kết quả sau -
Thuộc tính kiểu viền
Thuộc tính kiểu viền cho phép bạn chọn một trong các kiểu viền sau -
không có - Không có đường viền. [Tương đương với chiều rộng đường viền. 0;]
solid - Đường viền là một đường liền nét
chấm - Đường viền là một loạt các dấu chấm
nét đứt - Đường viền là một loạt các dòng ngắn
double - Đường viền là hai đường liền nét
rãnh - Đường viền trông như được khắc vào trang
sườn núi - Đường viền trông đối diện với rãnh
inset - Đường viền làm cho hộp trông giống như nó được nhúng trong trang
đầu - Đường viền làm cho hộp trông giống như nó sắp ra khỏi khung vẽ
ẩn - Giống như không, ngoại trừ về giải pháp xung đột đường viền cho các phần tử bảng
Bạn có thể thay đổi riêng kiểu của các đường viền dưới cùng, bên trái, trên cùng và bên phải của một phần tử bằng cách sử dụng các thuộc tính sau –
kiểu viền dưới cùng thay đổi kiểu đường viền dưới cùng
border-top-style thay đổi phong cách của đường viền trên cùng
border-left-style thay đổi phong cách của đường viền trái
border-right-style thay đổi phong cách của đường viền bên phải
Ví dụ sau đây cho thấy tất cả các kiểu đường viền này -
This is a border with none width.
This is a solid border.
This is a dashed border.
This is a double border.
This is a groove border.
This is a ridge border.
This is a inset border.
This is a outset border.
This is a hidden border.
This is a a border with four different styles.
Nó sẽ tạo ra kết quả sau -
Thuộc tính độ rộng đường viền
Thuộc tính độ rộng đường viền cho phép bạn đặt độ rộng của đường viền phần tử. Giá trị của thuộc tính này có thể là độ dài tính bằng px, pt hoặc cm hoặc nó phải được đặt thành mỏng, trung bình hoặc dày
Bạn có thể thay đổi riêng chiều rộng của các đường viền dưới cùng, trên cùng, bên trái và bên phải của một phần tử bằng cách sử dụng các thuộc tính sau –
border-bottom-width thay đổi độ rộng của viền dưới
border-top-width thay đổi độ rộng của đường viền trên cùng
border-left-width thay đổi độ rộng của viền trái
border-right-width thay đổi độ rộng của viền phải
Ví dụ sau đây cho thấy tất cả các chiều rộng đường viền này -
This is a solid border whose width is 4px.
This is a solid border whose width is 4pt.
This is a solid border whose width is thin.
This is a solid border whose width is medium;
This is a solid border whose width is thick.
This is a a border with four different width.
Nó sẽ tạo ra kết quả sau -
Thuộc tính đường viền bằng tốc ký
Thuộc tính đường viền cho phép bạn chỉ định màu, kiểu và độ rộng của các dòng trong một thuộc tính -
Ví dụ sau đây cho thấy cách sử dụng cả ba thuộc tính vào một thuộc tính duy nhất. Đây là thuộc tính được sử dụng thường xuyên nhất để đặt đường viền xung quanh bất kỳ phần tử nào