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>
Kết quả là:
Công cụ giáo viên (2048.VN)
Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free
Bài học CSS phổ biến khác tại vietjack.com:
Dành cho bạn
Công cụ giáo viên
- Tạo đề online từ PDF / Word
- Trộn nhiều mã đề, in Offline
- Giao bài online, Quản lí lớp học
