Rate this post

border là một thuộc tính trong CSS dùng để thiết lập viền cho các thành phần HTML. Nó có thể được thiết lập cho một thành phần hoặc cho nhiều thành phần cùng một lúc bằng cách sử dụng class hoặc id.

Các bài viết liên quan:

Các thuộc tính của border bao gồm:

border-width: độ rộng của viền
border-style: kiểu viền (ví dụ: solid, dotted, double, groove, ridge, inset, outset)
border-color: màu của viền

Ví dụ:

.box {
  border-width: 2px;
  border-style: solid;
  border-color: blue;
}

Trong ví dụ này, tất cả các thành phần có class là box sẽ có một viền màu xanh với độ rộng 2px và kiểu viền là solid.

Bạn cũng có thể sử dụng thuộc tính border để thiết lập tất cả các thuộc tính trên cùng một lúc:

.box {
  border: 2px solid blue;
}

Cũng có thể sử dụng cho từng cạnh viền riêng biệt bằng cách sử dụng các thuộc tính border-top, border-right, border-bottom, border-left và thiết lập giá trị cho chúng.

Ví dụ:

.box {
  border-top: 2px solid blue;
  border-right: 3px dotted green;
  border-bottom: 4px double red;
  border-left: 5px groove orange;
}

Trong ví dụ này, các thành phần có class là box sẽ có viền trên màu xanh với độ rộng 2px và kiểu viền là solid, viền phải màu xanh lá với độ rộng 3px và kiểu viền là dotted, viền dưới màu đỏ với độ rộng 4px và kiểu viền là double, viền trái màu cam với độ rộng 5px và kiểu viền là groove.

Ngoài ra, bạn cũng có thể sử dụng các thuộc tính border-radius để tạo viền bo tròn, border-image để sử dụng hình ảnh làm viền và các thuộc tính khác để tùy chỉnh viền theo nhu cầu của bạn.

Một số ví dụ border trong css

Ví dụ 1:

.box {
    border: 2px solid red;
}

Trong ví dụ này, tất cả các thành phần có class là box sẽ có một viền màu đỏ với độ rộng 2px và kiểu viền là solid.

Ví dụ 2:

.box {
    border-top: 1px dashed #ccc;
    border-right: 2px dotted green;
    border-bottom: 3px double orange;
    border-left: 4px groove purple;
}

Trong ví dụ này, các thành phần có class là box sẽ có viền trên màu xám với độ rộng 1px và kiểu viền là dashed, viền phải màu xanh với độ rộng 2px và kiểu viền là dotted, viền dưới màu cam với độ rộng 3px và kiểu viền là double, viền trái màu tím với độ rộng 4px và kiểu viền là groove.

Ví dụ 3:

.box {
    border-radius: 50%;
}

Trong ví dụ này, các thành phần có class là box sẽ có viền bo tròn.

Ví dụ 4:

.box {
    border-image: url("border-image.png") 30 30 round;
}

Trong ví dụ này, các thành phần có class là box sẽ sử dụng hình ảnh “border-image.png” làm viền, với khoảng cách giữa hình ảnh và viền là 30px và kiểu cắt là round.

Cần lưu ý là các ví dụ trên chỉ là một số trong nhiều cách sử dụng border trong CSS, bạn có thể sử dụng border với các giá trị khác nhau tùy thuộc vào nhu cầu và mục tiêu của giao diện của bạn.

CSS

border trong css

Một số ví dụ border trong css

Trả lời Hủy