Thuộc tính border trong CSS được dùng để định nghĩa các thuộc tính đường viền cho một phần tử. Nó là viết tắt cho border-width, border-style và border-color. Đường viền cho từng cạnh có thể được tạo kiểu và border-radius cũng có thể chỉ định.
Ngược lại, outline trong CSS không chiếm diện tích và được hiển thị quanh đường viền nếu có. Nó hỗ trợ offset. Hơn nữa, chúng ta không thể chỉ định các cạnh riêng lẻ có outline hay không.
Mặc định, cả border và outline đều không hiển thị.
Cú pháp
Cú pháp cho thuộc tính CSS border và outline:
Selector { border: /*giá trị*/ outline: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính CSS border và outline:
<!DOCTYPE html> <html> <head> <style> div { margin: 15px; padding: 20px; width: 35%; border: thin solid green; outline-width: 5px; outline-style: ridge; outline-color: fuchsia; border-radius: 50px; } </style> </head> <body> <h2>Ví dụ</h2> <div>Đây là nó!</div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> p { margin: 40px; padding: 12px; width: 30%; border: thick dashed green; outline: 5px inset; outline-color: fuchsia; } </style> </head> <body> <h2>Tiêu đề Demo</h2> <p>Đây là văn bản demo được bao quanh bởi border và outline.</p> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
