- Tham gia
- 28/02/2015
- Bài viết
- 17,128
- Được Like
- 12,743
Tìm hiểu thuộc tính border trong CSS
Thuộc tính border trong CSS hay còn được xem là đường viền của phần tử. Để 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à màu đường viền.
Thuộc tính border
Cả ba 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ụ, đoạn code CSS border: 5px solid green; đã chỉ ra đường viền có độ rộng 5px, kiểu đường liền, màu có màu xanh lá cây.
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ụ:
Đường viền theo từng cạnh
Cách viết ở phần trên tác động lê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
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
Thuộc tính border trong CSS hay còn được xem là đường viền của phần tử. Để 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à màu đường viền.
Thuộc tính border
Cả ba 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
Mã:
<style>
p.boderexam1 {
padding: 15px;
border: 5px solid green;
}
</style>
<p class="boderexam1">Ví dụ về đường viền</p>
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ụ:
Mã:
<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>
Cách viết ở phần trên tác động lê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
Mã:
<style>
p.borderexam2 {
border-top: 1px solid green;
border-bottom: 2px dotted red;
}
</style>
<p class="borderexam2">Ví dụ kể viền trên dưới</p>
- 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
Nguồn: Internet
Bài viết liên quan
Bài viết mới