Đường viền

Trong mô-đun mô hình hộp, chúng ta đã xem xét một phép so sánh khung để mô tả từng phần của mô hình hộp.

Ba khung ảnh cạnh nhau.
Khung giữa có các phần của mô hình hộp ở phía trên

Hộp đường viền là khung của các hộp, còn thuộc tính border cung cấp cho bạn một loạt các tuỳ chọn để tạo khung đó theo gần như mọi kiểu mà bạn có thể nghĩ ra.

Thuộc tính đường viền

Các thuộc tính border riêng lẻ cung cấp một cách để tạo kiểu cho nhiều phần của đường viền.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Phong cách

Để đường viền xuất hiện, bạn phải xác định border-style. Bạn có một số lựa chọn như sau:

Khi sử dụng các kiểu ridge, inset, outsetgroove, trình duyệt sẽ làm tối màu đường viền cho màu thứ hai hiển thị để tạo độ tương phản và chiều sâu. Hành vi này có thể khác nhau giữa các trình duyệt, đặc biệt là đối với các màu tối như black. Trong Chrome, các kiểu đường viền này sẽ có dạng màu đồng nhất và trong Firefox, các kiểu đường viền này sẽ được làm sáng để tạo ra màu thứ hai đậm hơn.

Hành vi của trình duyệt cũng có thể khác nhau đối với các kiểu đường viền khác, vì vậy, điều quan trọng là bạn phải kiểm thử trang web của mình trên nhiều trình duyệt. Một ví dụ phổ biến về sự khác biệt này là cách mỗi trình duyệt hiển thị các kiểu dotteddashed.

Bản minh hoạ đường viền trong Chrome, Firefox và Safari cho thấy sự khác biệt nhỏ về cách hiển thị đường viền
Các đường viền hiển thị trong Chrome, Firefox và Safari.

Để đặt kiểu đường viền ở mỗi cạnh của hộp, bạn có thể sử dụng border-top-style, border-right-style, border-left-styleborder-bottom-style.

Chữ viết tắt

Cũng như marginpadding, bạn có thể sử dụng thuộc tính viết tắt border để xác định tất cả các phần của đường viền trong một phần khai báo.

.my-element {
    border: 1px solid red;
}

Thứ tự các giá trị trong viết tắt borderborder-width, border-style và sau đó là border-color.

Màu

Bạn có thể đặt màu trên tất cả các cạnh của hộp hoặc trên từng cạnh riêng lẻ bằng border-color. Theo mặc định, thuộc tính này sử dụng màu văn bản hiện tại của hộp: currentColor. Điều này có nghĩa là nếu bạn chỉ khai báo các thuộc tính đường viền, chẳng hạn như chiều rộng, thì màu sắc sẽ là giá trị được tính toán trừ phi bạn đặt giá trị đó một cách rõ ràng.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Để đặt màu đường viền ở mỗi cạnh của hộp, hãy sử dụng border-top-color, border-right-color, border-left-colorborder-bottom-color.

Chiều rộng

Độ rộng của đường viền là độ dày của đường kẻ và được kiểm soát bởi border-width. Chiều rộng đường viền mặc định là medium. Tuy nhiên, bạn sẽ không thấy được thông tin này trừ phi bạn xác định một kiểu. Bạn có thể sử dụng các chiều rộng được đặt tên khác như thinthick.

Các thuộc tính border-width cũng chấp nhận đơn vị chiều dài như px, em, rem hoặc %. Để đặt chiều rộng đường viền ở mỗi cạnh của hộp, hãy sử dụng border-top-width, border-right-width, border-left-widthborder-bottom-width.

Thuộc tính logic

Trong mô-đun Thuộc tính logic, bạn đã tìm hiểu cách tham chiếu đến luồng khối và luồng nội tuyến, thay vì các cạnh trên, phải, dưới hoặc trái rõ ràng.

Bạn cũng có thể làm điều này với đường viền:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Trong ví dụ này, .my-element có tất cả các cạnh được xác định là có đường viền chấm 2px, là màu văn bản hiện tại. Sau đó, đường viền inline-end được xác định là 2px, màu đỏ và liền mạch. Điều này có nghĩa là đối với các ngôn ngữ đọc từ trái sang phải (như tiếng Anh), đường viền màu đỏ sẽ nằm ở bên phải của hộp. Đối với các ngôn ngữ viết từ phải sang trái (như tiếng Ả Rập), đường viền màu đỏ sẽ nằm ở bên trái của hộp.

Khả năng hỗ trợ trình duyệt khác nhau đối với các thuộc tính logic trong đường viền, vì vậy, hãy nhớ kiểm tra khả năng hỗ trợ trước khi sử dụng.

Bán kính đường viền

Để tạo góc bo tròn cho hộp, hãy sử dụng thuộc tính border-radius.

.my-element {
    border-radius: 1em;
}

Mã viết tắt này sẽ thêm một đường viền nhất quán vào mỗi góc của hộp. Cũng như các thuộc tính đường viền khác, bạn có thể xác định bán kính đường viền cho mỗi cạnh bằng border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius.

Bạn cũng có thể chỉ định bán kính của mỗi góc theo cách viết tắt, theo thứ tự: trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải rồi dưới cùng bên trái.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

Bằng cách xác định một giá trị duy nhất cho một góc, bạn đang sử dụng một ký hiệu viết tắt khác vì bán kính đường viền được chia thành hai phần: cạnh dọc và cạnh ngang. Điều này có nghĩa là khi đặt border-top-left-radius: 1em, bạn đang đặt bán kính trên cùng bên trái-trên cùng và bán kính trên cùng bên trái-bên trái.

Bạn có thể xác định cả hai thuộc tính cho mỗi góc như sau:

.my-element {
    border-top-left-radius: 1em 2em;
}

Thao tác này sẽ thêm giá trị border-top-left-top1em và giá trị border-top-left-left2em. Thao tác này sẽ chuyển đổi bán kính đường viền trên cùng bên trái thành bán kính hình elip, thay vì bán kính hình tròn mặc định.

Bạn có thể xác định các giá trị này trong viết tắt border-radius, sử dụng / để xác định các giá trị hình elip, sau các giá trị chuẩn. Điều này cho phép bạn sáng tạo và tạo một số hình dạng phức tạp.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Hình ảnh đường viền

Bạn không chỉ phải sử dụng đường viền dựa trên nét vẽ trong CSS. Bạn cũng có thể sử dụng bất kỳ loại hình ảnh nào bằng cách sử dụng border-image. Thuộc tính viết tắt này cho phép bạn đặt hình ảnh nguồn, cách hình ảnh đó được cắt, chiều rộng hình ảnh, khoảng cách lề từ cạnh và cách lề lặp lại.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

Thuộc tính border-image-width giống như border-width: đó là cách bạn đặt chiều rộng của hình ảnh đường viền. Thuộc tính border-image-outset cho phép bạn đặt khoảng cách giữa hình ảnh đường viền và hộp mà hình ảnh đường viền bao quanh.

border-image-source

border-image-source (nguồn của hình ảnh đường viền) có thể là url cho bất kỳ hình ảnh hợp lệ nào, bao gồm cả hiệu ứng chuyển màu CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

Thuộc tính border-image-slice là một thuộc tính hữu ích cho phép bạn cắt một hình ảnh thành 9 phần, bao gồm 4 đường phân tách. Phương thức này hoạt động giống như viết tắt margin, trong đó bạn xác định giá trị chênh lệch trên, phải, dưới và trái.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Hình ảnh được dùng trong bản minh hoạ với 4 lát cắt được thể hiện bằng các đường màu xanh dương

Khi đã xác định các giá trị chênh lệch, bạn hiện có 9 phần của hình ảnh: 4 góc, 4 cạnh và một phần giữa. Các góc được áp dụng cho các góc của phần tử có hình ảnh đường viền. Các cạnh được áp dụng cho các cạnh của phần tử đó. Thuộc tính border-image-repeat xác định cách các cạnh đó lấp đầy không gian của chúng và thuộc tính border-image-width kiểm soát kích thước của các lát cắt.

Cuối cùng, từ khoá fill xác định liệu phần giữa, do quá trình cắt để lại, có được dùng làm hình nền của phần tử hay không.

border-image-repeat

border-image-repeat là cách bạn hướng dẫn CSS về cách bạn muốn lặp lại hình ảnh đường viền. Phương thức này hoạt động giống như background-repeat.

  • Giá trị ban đầu là stretch, giúp kéo giãn hình ảnh nguồn để lấp đầy không gian có sẵn nếu có thể.
  • Giá trị repeat xếp kề các cạnh của hình ảnh nguồn nhiều lần nhất có thể và có thể cắt bớt các vùng cạnh để đạt được điều này.
  • Giá trị round giống như giá trị lặp lại, nhưng thay vì cắt bớt các vùng cạnh hình ảnh để vừa với nhiều hình ảnh nhất có thể, giá trị này sẽ kéo giãn hình ảnh cũng như lặp lại hình ảnh để đạt được hiệu ứng lặp lại liền mạch
  • Giá trị space cũng giống như giá trị lặp lại, nhưng giá trị này sẽ thêm khoảng trống giữa mỗi vùng cạnh để tạo ra một mẫu liền mạch.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về đường viền

Màu đường viền mặc định là màu nào?

currentColor
white
black
historicColor
.my-element {
  border: solid hotpink;
}

Độ rộng mặc định của đường viền là bao nhiêu?

1px
solid
medium

border-inline: 1px solid sẽ...

đặt đường viền ở bên trái và bên phải (trong bố cục Latin).
đặt đường viền ở bên trong.
đặt đường viền trên dòng đầu tiên.
đặt đường viền ở đầu và cuối (trong bố cục Latinh).