Tìm hiểu thuộc tính border trong CSS

Thuộc tính này thì đảm bảo là có trên mọi website và hầu như ai ai cũng biết. Thế đem vào đây viết bài chi vậy? Lý do rất đơn giản mình viết bài này ở đây là để giới thiệu cho những ai chưa biết, hoặc đơn thuần là biết nhưng nhiều khi chưa biết hết. Không lằng nhằng nữa bắt đầu vào việc thôi.

Tìm hiểu thuộc tính border trong CSS

Tìm hiểu thuộc tính border trong CSS

Thuộc tính border là thuộc tính giúp chúng ta thêm đường viền vào đối tượng, không giống như nhiều thuộc tính cơ bản khác, khi sử dụng để trông được một cách đầy đủ và hoàn thiện nhất nó yêu cầu chúng ta cung cấp 3 điều sau:
  • Độ dày đường viên
  • Kiểu đường viền
  • Màu đường viền
Về độ dày và màu đường viền thì không phải nói gì rồi, còn kiểu đường viền, chúng ta có các lựa chọn như sau: none, dotted, dashed, solid, groove, ridge, inset, và outset.

Sau đây mình xin được tạo ra một đối tượng và tạo đường viền cho nó:

border: 1px none #DDD

border: 2px dotted #DDD

border: 3px dashed #DDD

border: 4px solid #DDD

border: 5px groove #DDD

border: 6px ridge #DDD

border: 7px inset #DDD

border: 8px outset #DDD

Theo mình nghĩ với những ví dụ trực tiếp như trên mình bạn đã đủ để bạn hiểu thuộc tính boder là như thế nào rồi, có lẽ là bài viết này không nói đến gì mới lạ cho lắm, nhưng rất mong rằng nó hữu ích cho một số người đang tìm và học CSS.

P/S: Sau này sau khi hướng dẫn những điều cơ bản về CSS2 xong mình sẽ chuyển sang hướng dẫn lấn sang những thủ thật cực ngầu sử dụng CSS3 đến các bạn.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.