HTML/CSS | Thuộc tính border

Học HTML, CSS từ Zero Tới Hero

• Vị trí trong Box model
• Tính chất
• Làm tăng kích thước phần tử
• Màu nền/ảnh nền được đổ từ border vào trong
• Border được bo theo thuộc tính border-radius
• Cú pháp sử dụng
• Trường hợp sử dụng

Tài nguyên sử dụng trong bài học:

• Tra cứu thuộc tính border-style: CSS border-style Property
• Ví dụ sử dụng thuộc tính border: [Box model] CSS border property (link dự phòng)

Vị trí trong Box model

Border là thuộc tính dùng dùng để tạo viền. Trong Box Model, border nằm ở vị trí thứ 3 tính từ trong ra ngoài, nằm giữa padding và margin.

Tính chất

Làm tăng kích thước phần tử

Khi một phần tử được chỉ định width và height thì đó chưa phải là kích thước thật của phần tử. Nếu có thêm padding và border, độ dày của border sẽ được cộng với padding và content để tạo nên kích thước thật của phần tử.

Ví dụ, class .box có kích thước gốc là 300x300. Sau khi thêm padding và border, kích thước đã thay đổi thành 340x340.

Kích thước thật của một phần tử luôn được tính như sau:

• Chiều rộng = width + (padding trái + padding phải) + (border trái + border phải)
• Chiều cao = height + (padding trên + padding dưới) + (border trên + border dưới)

Màu nền/ảnh nền được đổ từ border vào trong

Mặc định, khi sử dụng ảnh nền hoặc màu nền thì ảnh hoặc màu nền sẽ được đổ từ border trở vào content.

<style>
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background-color: tomato;
    border: 10px solid pink;
}
</style>

<div class="box"></div> 

Ở ví dụ trên, có thể bạn sẽ thắc mắc nếu có màu nền thì nó sẽ được đổ từ border vào content. Vậy lúc này class .box chỉ hiển thị màu nền cà chua thôi chứ nhỉ? Sao vẫn còn màu hồng của border?

Cùng quan sát xem nào:

<style>
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background-color: tomato;
    border: 10px solid transparent;
}
</style>

<div class="box"></div> 

Màu của border đã được đổi thành transparent - trong suốt.

Inspect trình duyệt ra sẽ thấy border vẫn nằm ở đó. Ở ví dụ trên, bạn vẫn thấy màu của border vì màu nền/ảnh nền sẽ nằm ở dưới, border nằm ở trên cùng nên vẫn được hiển thị.

Border được bo theo thuộc tính border-radius

Khi sử dụng border-radius để bo các góc, border cũng sẽ được bo theo, ví dụ:

<style>
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: blueviolet;
    border: 10px solid pink;
    border-radius: 50%;
}
</style>

<div class="box"></div> 

Cú pháp sử dụng

Cú pháp:

selector {
 border: value;
}

Ví dụ:

.btn {
   border: 2px solid pink;
}

Thuộc tính border là cú pháp viết tắt của:

• border-width: độ dày đường viền
• border-style: kiểu dáng đường viền
• border-color: màu sắc đường viền

Thuộc tính border-width lại là cú pháp viết tắt của:

• border-top-width: Độ dày viền trên
• border-bottom-width: Độ dày viền dưới
• border-left-width: Độ dày viền trái
• border-right-width: Độ dày viền phải

Các thuộc tính border-width, border-style, border-color đều có thể có từ 1 tới 4 giá trị tương ứng với các hướng: top, right, bottom, left, nên bạn có thể ghi nhớ tương tự với thuộc tính border-style và border-color.

Có thể chỉ định giá trị cho một hoặc tất cả các hướng theo cách sau:

Giá trị	Mô tả
border-width: 10px	Độ dày đường viền cả 4 hướng đều là 10px
border-width: 10px 20px	Đường viền trên/dưới dày 10px, đường viền trái/phải dày 20px
border-width: 10px 20px 30px	Đường viền trên dày 10px, trái/phải dày 20px, dưới dày 30px
border-width: 10px 20px 30px 40px	Độ dày các đường viền theo thứ tự: trên-phải-dưới-trái

Cách chỉ định giá trị của border-style và border-color cũng sẽ tương tự như border-width.

Thuộc tính border-style sẽ có rất nhiều kiểu, các kiểu thông dụng là: dotted, dashed, solid, v.v. Bạn có thể tìm hiểu thêm về kiểu dáng đường viền với từ khóa “border-style values”.

Có nhiều cách viết như thế, vậy nên chọn cách nào? Bạn nên viết gộp khi các hướng đều giống nhau về độ dày, kiểu dáng và màu sắc. Các thuộc tính cụ thể thường được dùng cho một trường hợp riêng lẻ nhất định.

Trường hợp sử dụng

Có thể sử dụng border để làm đẹp cho nút bấm:

<style>
.btn {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 20px;
  border: 2px solid #5ebbff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #5ebbff;
  background-color: #fff;
}
</style>

<a class="btn">TIẾP THEO</btn> 

TIẾP THEO

Hay thể hiện một đoạn trích dẫn:

<style>
p,
blockquote {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
}

blockquote {
  margin: 0;
  padding: 6px 10px;
  border-left: 4px solid #5ebbff;
  background-color: #d4edff;
}
</style>

<p>
    Thiền sư Minh Niệm khẳng định, tình thương chính là mạch nguồn của sự sống. 
</p>
<blockquote>
Ngoài việc mưu sinh, con người có 2 nhu cầu rất cơ bản là được thương yêu và được công nhận.
</blockquote>

<p>
Tác phẩm này giúp truyền đạt những suy ngẫm, lý giải về hạnh phúc, tình yêu.
</p>

Thiền sư Minh Niệm khẳng định, tình thương chính là mạch nguồn của sự sống.

Ngoài việc mưu sinh, con người có 2 nhu cầu rất cơ bản là được thương yêu và được công nhận.

Tác phẩm này giúp truyền đạt những suy ngẫm, lý giải về hạnh phúc, tình yêu.

Tóm tắt

• Trong Box Model, border nằm ở vị trí thứ 3 tính từ trong ra ngoài, nằm giữa padding và margin.
• Border tham gia làm tăng kích thước phần tử.
• Khi có ảnh/màu nền, ảnh/màu nền sẽ được đổ từ border vào content.
• Khi sử dụng border-radius để bo góc, border cũng sẽ được bo theo.