Thuộc tính nào trong css định dạng kiểu border phía top của element
Thuộc tính border dùng để định dạng đường viền cho phần tử HTML. Show Dưới đây là một số thuộc tính border:
Thiết lập kiểu đường viềnThuộc tính border-style dùng để thiết lập kiểu đường viền. Cú pháp
Chúng ta có một số kiểu đường viền như: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
Xem ví dụ Lưu ý: Đường viền của phần tử chỉ hiện lên khi nó đã được thiết lập kiểu đường viền. Thiết lập độ dày của đường viềnThuộc tính border-width dùng để thiết lập độ dày của đường viền
Xem ví dụ Lưu ý: Nếu ta không thiết lập độ dày của đường viền thì mặc định đường viền sẽ có độ dày là 3px Thiết lập màu của đường viềnThuộc tính border-color dùng để thiết lập màu của đường viền Cú pháp
Trong đó, "màu sắc" có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX (Nếu chưa rõ cách xác định màu, bạn có thể xem lại bài Màu sắc trong CSS)
Xem ví dụ Thiết lập đường viền ở các vị trí khác nhauĐường viền luôn bao gồm bốn vị trí: top, right, bottom, left Nếu định dạng cho đường viền mà không xác định vị trí cụ thể thì mặc định cả 4 vị trí sẽ có cùng một kiểu định dạng. Để định dạng cho đường viền ở từng vị trí cụ thể, ta có hai cách: Cách 1: Thêm vị trí vào thuộc tínhCú pháp
Xem ví dụ Ta cũng có thể tạo đường viền mặc định cho cả bốn vị trí trước, sau đó chỉnh lại từng vị trí.
Xem ví dụ Cách 2: Thiết lập nhiều giá trịChúng ta sẽ thiết lập nhiều giá trị tương ứng với nhiều vị trí. Với cách này, ta có 4 cú pháp:
Xem ví dụ Cú pháp định dạng đường viền rút gọnThay vì phải định dạng cho đường viền bởi 3 thuộc tính (border-style, border-width, border-color) riêng biệt, thì ta có thể gôm chúng lại thành một theo cú pháp sau:
Trong đó:
Lưu ý: Không nhất thiết thuộc tính border phải có đủ 3 giá trị. Tuy nhiên, các giá trị phải được sắp xếp theo đúng thứ tự đó. Ngoài ra, ta cũng có thể định dạng cho đường viền ở từng vị trí cụ thể bằng cú pháp border-vị trí
Xem ví dụ |