Cách sử dụng thuộc tính border trong css:

Border:1px solid red Xem demo Bạn cần chú ý tới 3 thông số: 1px, solid và red 1px được gọi là border-width. Nó chính là độ dày của đường viền. Bạn có thể đặt 2px, 3px… để tăng độ dày của đường viền. Ví dụ: P { Border: 1px solid red; } P { Border: 2px solid red; } P { Border: 3px solid red; } Xem demo Solid được gọi là border-style. Nó chính là kiểu của đường viền. border-style có các giá trị

• Dotted: đường viền chấm chấm
• Dashed: Đường viên đứt đoạn
• Solid: đường viền liền
• Double: thiết lập 2 đường viền liên tiếp
• Và 1 số giá trị khác ít dùng: groove, ridge, inset, outset, none, hidden, mix.

Ví dụ: Nói chung, bạn không cần nhớ hết các giá trị này đâu. Khi viết editor sẽ đưa ra gợi ý cho bạn. p.dotted { Border: 1px dotted red; } p.dashed { Border: 1px dashed red; } p.solid { Border: 1px solid red; } p.double { Border: 1px double red; } p.groove { Border: 1px groove red; } p.ridge { Border: 1px ridge red; } p.inset { Border: 1px inset red; } p.outset { Border: 1px outset red; } p.none { Border: 1px none red; } p.hidden { Border: 1px hidden red; } p.mix { Border: 1px mix red; } Xem demo Red được gọi là border-color. Nó được dùng để thiết lập màu sắc cho đường viền. border-corlor nhận các giá trị sau:

• Tên màu sắc: red, green, black….Nó chính là tên tiếng anh của màu sắc: xanh đỏ tím vàng….
• Mã màu sắc: #222, # ff0000, #666456… Để lấy mã màu sắc thì bạn cần dùng Photoshop để lấy(chứ không ai nhớ được đâu) \
• Hệ màu RGB : rgb(255,0,0)…Để xác định hệ màu RGB thì bạn dùng photoshop hoặc các công cụ khác như color schemer,.. chứ không ai nhớ được đâu.

Ví dụ: P { Border: 1px solid red; } P { Border: 1px solid #222; } P { Border: 1px solid rgb(255,0,0); } Xem demo

1 số cách dùng của thuộc tính border

Với 1 thẻ HTML hoặc 1 khối nào đó thì luôn có 4 cạnh bao quanh

: Trên, phải, dưới, trái tương ứng với top, right, bottom, left. Vì thế, khi viết Border: 1px solid red; thì CSS hiểu là bạn đang viết cho cả 4 cạnh. Tuy nhiên, trong 1 số trường hợp, bạn chỉ muốn viết border cho 1 cạnh nào đó thì dùng

• Border-top: thiết lập đường viền trên cùng.
• Border-right: thiết lập đường viền bên phải
• Border-bottom: thiết lập đường viền dưới cùng
• Border-left: thiết lập đường viền bên trái

Ví dụ: P {Border-top: 1px solid red; } P {Border-right: 1px solid red; } P {Border-bottom : 1px solid red; } P {Border-left: 1px solid red; } Xem demo

Bo tròn các góc

Mặc định khi thiết lập border trong css thì các góc đều là góc vuông. Trong 1 số trường hợp bạn muốn bo tròn các góc thì dùng thuộc tính border-radius. Ví dụ: border-radius: 5px . nếu viết thế này thì css hiểu là bo tròn đều 4 góc border-radius: 5px 4px; border-radius: 5px 4px 3px; border-radius: 5px 10px 2px 4px; mỗi góc có 1 độ bo tròn khác nhau Xem demo Kết luận: Thuộc tính border trong CSS dùng khá thường xuyên, bạn cần nắm được nó để sử dụng. Bạn thấy khó hiểu ở chỗ nào thì comment lại để mình trợ giúp