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; }
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; }
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); }
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; }
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