Thuộc tính border là gì, cách sử dụng ra sao?

Chào các bạn, đã lâu rồi mình không ra bài rồi nhỉ, công một số lý do về công việc thôi, mong các bạn thông cảm.
Ở bài viết hôm nay mình sẽ giới thiệu cho các bạn newbie về thuộc tính border và cách sử dụng của nó, các bạn nhớ ủng hộ nhé!

Border là gì?

Border hiểu đơn giản là một thuộc tính cơ bản trong CSS được sử dụng để tạo viền cho phần tử được chọn.

Border sử dụng như thế nào?

Để thêm đường viền cho phần tử, bạn cần chỉ ra các tham số: size độ rộng đường viền, style kiểu đường viền (nét liền, đứt, chấm ...) và color màu đường.

Thuộc tính border

Sử dụng 3 tham số size, style, color trên có thể được viết trên một dòng CSS với thuộc tính border
Ví dụ:

<style>
.vidu1{padding:15px;border:2px solid #069999}
</style>
<p class="vidu1">Ví dụ về đường viền</p>

Kết quả:

Ví dụ về đường viền

Ở ví dụ đoạn CSS border:2px solid #069999 đã hiện ra đường viềnn có độ rộng 5px, kiểu đường liền, với mã màu là #069999.

Thuộc tính border-width, border-color, border-style

Ngoài cách viết đường viền theo thuộc tính border như trên, còn có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ ra độ rộng, kiểu đường và màu sắc.

Độ rộng đường là giá trị theo đơn vị px, em...

Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba

Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden
Ví dụ:

<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;border-color: orangered;}
p.dashed {border-width: 5px;border-color: green;border-style: dashed;}
p.double {border-style: double;border-color: red;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
<p class="none">Không kẻ khung.</p>
<p class="dotted">Kiểu dotted.</p>
<p class="dashed">Kiểu dashed.</p>
<p class="double">Kiểu double.</p>
<p class="groove">Kiểu grooved.</p>
<p class="ridge">Kiểu ridged.</p>
<p class="inset">Kiểu inset.</p>
<p class="outset">Kiểu outset.</p>
<p class="hidden">Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).</p>

Kết quả:

Không kẻ khung.

Kiểu dotted.

Kiểu dashed.

Kiểu double.

Kiểu grooved.

Kiểu ridged.

Kiểu inset.

Kiểu outset.

Đường viền theo từng cạnh

Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.
Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border-top, border-right, border-bottom, border-left.
Ví dụ:

<style>
.vidu2 {border-top: 1px solid green;border-bottom: 2px dotted red;}
</style>
<p class="vidu2">Ví dụ kể viền trên dưới</p>

Ví dụ kể viền trên dưới

Tương tự như border-color, border-width, boder-style bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính:

border-left-width

border-left-style

border-left-color

border-top-width

border-top-style

border-top-color

border-right-width

border-right-style

border-right-color

border-bottom-width

border-bottom-style

border-bottom-color

Tổng kết

Vậy là mình đã chỉ ra những thông tin về border và cách sử dụng của nó rồi. Chúc các bạn có một ngày vui vẻ, thanks for watching!
Code được tham khảo từ một số nguồn khác nhau

THÔNG BÁO