Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Đường viền border trong CSS

Sử dụng các thuộc tính về đường viền border như kiểu đường viền border-style, màu đường border-color và độ rộng border-width

Đường viền border CSS

Để 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

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

 <style>
    p.boderexam1 {
        padding: 15px;
        border: 5px solid green;
    }
</style>

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

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

Ở 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 đường 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ụ:

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

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

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

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

Vui lòng đăng ký ủng hộ kênh