Tìm hiểu thuộc tính border trong CSS

PVS

Super Moderator
Thành viên BQT
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
Mã:
<style>
    p.boderexam1 {
        padding: 15px;
        border: 5px solid green;
    }
</style>

<p class="boderexam1">Ví dụ về đường viền</p>

screenshot_1591243838.png

Ở 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ụ:
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>

screenshot_1591243931.png

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

screenshot_1591243998.png

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
Chúc các bạn thành công.


Nguồn: Internet​
 

Top Bottom