Chúng ta sẽ tìm hiểu về 2 loại đường viền bao quanh một thẻ là border và outline.

1.Border

Border là đường viền bao quanh một thẻ được thiết lập bằng ba giá trị chính là kiểu, kích thước và màu sắc.

div {
 border-style: solid;
 border-width: 1px;
 border-color: #000;
}

Có 3 thuộc tính border thường dùng là:

• border-style: định dạng kiểu cho border, có nhiều giá trị nhưng chủ yếu là kiểu solid và dotted
• border-width: định dạng kích thước của border
• border-color: định dạng màu sắc cho border

Nhưng thường sẽ viết ngắn gọn 3 thuộc tính trên thành:

div {
 border: 1px solid #000;
}

Để border riêng cho từng cạnh:

div {
 border-top: 1px solid #000;
 border-right: 1px solid #000;
 border-bottom: 1px solid #000;
 border-left: 1px solid #000;
}

Còn để bo tròn góc chúng ta dùng border-radius:

div {
 border-radius: 5px; // Mỗi góc sẽ được bo tròn 5px
}

Cũng có thể bo tròn cho từng góc như sau:

div {
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
}

Mẹo: Để bo tròn cho một hình vuông ta dùng border-radius: 999px hoặc border-radius: 50%

2.Outline là gì

Outline là một đường viền bổ sung bao quanh 1 thẻ. Các thuộc tính và giá trị của outline cũng tương tự như border, chỉ có khác nhau là border sẽ làm thay đổi cấu trúc của trang còn outline thì không. Bởi vì khi thêm border cho 1 phần tử nào đó thì các phần tử xung quanh nó cũng phải xê dịch ra một khoảng bằng với border vừa thêm cho phần tử đó, còn với outline khi thêm cho phần tử thì nó chỉ xuất hiện ở đó để làm nổi bật phần tử chứ các phần tử xung quanh nó không bị xê dịch ra.

Như hình trên ta có box 1 có màu đỏ và border có màu xanh lá, box 2 ở dưới box 1 nên sẽ tiếp xúc với border của box 1. Như vậy khi thay đổi kích thước hay xoá border của box 1 thì vị trí của box 2 cũng sẽ thay đổi.

Giờ xem ví dụ về outline

Hình trên ta thấy box 2 tiếp xúc với phần content màu đỏ của box 1 chứ không tiếp xúc với outline màu xanh lá nên box 2 đã bị che mất một phần bằng với độ rộng của outline box 1. Như vậy dù ta có thay đổi hay xoá đi outline thì box 2 cũng luôn tiếp xúc với box 1 ở vị trí đó.

Qua bài này các bạn đã có thể hiểu được border và outline để áp dụng vào dự án thực tế. Tham gia các khoá hoc dưới đây để nắm những kiến thức nâng cao hơn.

• Khoá học Frontend: tại đậy
• Khoá học Backend: tại đây
• Khoá học Fullstack: tại đây
• Khoá học React-native: tại đây