Học css:Thuộc tính border

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