Tải bản đầy đủ

Thuộc tính border

Thuộc tính border
Người đăng: Chiến Thần - Ngày: 11/01/2017

Thuộc tính border trong CSS dùng để thiết lập đường viền cho thẻ HTML. Border có thể sử dụng cho 1
thẻ hoặc nhiều thẻ html hoặc 1 khối nào đó. Cứ cái nào mà bạn thấy có đường kẻ bao quanh thì đó
chính là border.

Cách sử dụng thuộc tính border trong css:
Border:1px solid
Xem demo

red

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
P
P
P

{Border-top: 1px solid red; }
{Border-right: 1px solid red; }
{Border-bottom : 1px solid red; }
{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:
border-radius:
border-radius:
border-radius:

5px
5px
5px
5px

. nếu viết thế này thì css hiểu là bo tròn đều 4 góc
4px;
4px 3px;
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



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×