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

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

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.

Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).

Đườ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

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin