Thuộc tính border-width trong CSS

Thuộc tính border-width trong CSS dùng để chỉ định độ rộng viền cho phần tử. Có thể thiết lập riêng cho từng cạnh: border-top-width, border-right-width, border-bottom-width, border-left-width.

Cú pháp

Selector { border-width: /*giá trị*/ }

Ví dụ 1: Viền bottom dày, bo góc

<!DOCTYPE html>
<html>
<head>
<style>
#main {
  border-bottom-width: 20px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
div {
  margin: auto;
  height: 100px;
  width: 80px;
  border-style: double;
  border-width: 5px;
}
div > div {
  margin-top: 15px;
  height: 50px;
  width: 50px;
  border-style: dashed;
  border-color: red;
  border-width: thin;
  text-align: center;
  line-height: 50px;
}
</style>
</head>
<body>
<div id="main">
  <div>demo</div>
</div>
</body>
</html>

Kết quả

Ví dụ 2: Viền ridge cho p, solid thin cho q

<!DOCTYPE html>
<html>
<head>
<style>
p {
  padding: 2%;
  border-style: ridge;
  border-width: 4px;
  border-color: indianred;
}
q {
  border-style: solid;
  border-width: thin;
  text-align: center;
  font-style: italic;
}
</style>
</head>
<body>
<p> Thông tin sinh viên được bao gồm ở đây. </p>
<hr>
<q>Giáo dục là vũ khí mạnh mẽ nhất bạn có thể dùng để thay đổi thế giới.</q>
</body>
</html>

Kết quả

Giá trị border-width:

• Độ dài: px, em, rem, cm... (ví dụ: 5px, 0.5em)
• Từ khóa: thin (1px), medium (3px, mặc định), thick (5px)
• 1 giá trị: 4 cạnh | 2 giá trị: top/bottom, left/right | 3 giá trị: top, left/right, bottom | 4 giá trị: top, right, bottom, left