💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Đường viền (Border)
📌
Kết luận
Dùng border: 1px solid #ccc; để tạo đường viền
📝 Mã thực tế tại đây
div { border: 1px solid #ccc; }Cách viết thuộc tính border
border cho phép bạn chỉ định đồng thời 3 yếu tố: "Độ dày Kiểu dáng Màu sắc".
| Kiểu dáng | Hình dáng |
|---|---|
solid | Nét liền |
dashed | Nét đứt |
dotted | Nét chấm |
Chỉ định cho từng cạnh
Bạn có thể dùngborder-top, border-right, border-bottom, border-left để chỉ định riêng lẻ. Rất hữu ích khi bạn chỉ muốn tạo đường gạch chân.
Tổng kết
-border chỉ định gộp độ dày, kiểu dáng và màu sắc
- Có thể chỉ định riêng cho từng cạnh
Hãy thử trong phần bài tập
Hãy thêm đường viền 1px solid #ccc cho thẻ div nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy thêm đường viền nét liền, dày 1px, màu #ccc cho thẻ div.
Gợi ý khi gặp khó khăn
border: 1px solid #ccc;