Thuộc tính border-width trong CSS

Để thiết lập độ rộng cho cả 4 cạnh của đường viền trong một Style Rule, bạn có thể sử dụng thuộc tính border-width trong CSS.

Thuộc tính border-width có thể nhận giá trị:

length: đơn vị độ dài, có giá trị lớn hơn hoặc bằng 0.
thin: nếu được thiết lập là thin thì đường viền này sẽ có độ rộng lớn hơn khi được xác định là medium.
medium: nếu được thiết lập là medium thì đường viền này sẽ có độ rộng nhỏ hơn khi được thiết lập là thin và lớn hơn khi được thiết lập là thick.
thick: nếu được thiết lập là thick thì đường viền có độ rộng nhỏ hơn khi thiết lập với giá trị medium.

Thuộc tính border-width có thể áp dụng cho:

Tất cả các phần tử HTML.

Cú pháp thuộc tính border-width trong DOM

object.style.borderWidth = "2px";

Ví dụ thuộc tính border-width trong CSS

Bạn theo dõi ví dụ sau để thấy cách thiết lập độ rộng cho 4 cạnh của đường viền trong CSS bởi sử dụng thuộc tính border-width.

<html>
   <head>
   </head>
   <body>
      <p style="border-width:4px; border-style:solid;">
      Vi du Border dang solid co do rong la 4px.
      </p>
      
      <p style="border-width:4pt; border-style:solid;">
      Vi du Border dang solid co do rong la 4pt.
      </p>
      
      <p style="border-width:thin; border-style:solid;">
      Vi du Border dang solid co do rong la thin.
      </p>
      
      <p style="border-width:medium; border-style:solid;">
      Vi du Border dang solid co do rong la medium;
      </p>
      
      <p style="border-width:thick; border-style:solid;">
      Vi du Border dang solid co do rong la thick.
      </p>
      <p style="border-bottom-width:4px;
         border-top-width:10px;
         border-left-width: 2px;
         border-right-width:15px;
         border-style:solid;">
         
         Vi du Border dang solid co do rong khac nhau cho cac canh.
      </p>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: