Trong hướng dẫn này, bạn sẽ học cách xác định đường viền xung quanh một phần tử bằng CSS.

Thuộc tính border trong CSS

    Thuộc tính đường viền CSS cho phép bạn xác định vùng đường viền của hộp phần tử.

    Đường viền xuất hiện trực tiếp giữa lề và phần đệm của một phần tử. Đường viền có thể là một kiểu được xác định trước như đường nét liền, đường chấm chấm, đường kép, v.v. hoặc một hình ảnh .

    Phần sau đây mô tả cách đặt kiểu, màu và độ rộng của đường viền.

Các kiểu viền khác nhau

    Thuộc tính border-style đặt kiểu đường viền của hộp, chẳng hạn như: solid, dotted, v.v. Đây là thuộc tính rút gọn để đặt kiểu đường cho cả bốn cạnh của đường viền phần tử.

    Thuộc tính border-style có thể có các giá trị sau: none, hidden, solid, dashed, dotted, double, inset, outset, groove, và ridge. Bây giờ, hãy xem hình minh họa sau đây, nó cho bạn cảm giác về sự khác biệt giữa các kiểu kiểu viền.

    Các giá trị none và hidden hiển thị không có đường viền, tuy nhiên, có một chút khác biệt giữa hai giá trị này. Trong trường hợp ô bảng và đường viền bị thu gọn, none có mức ưu tiên thấp nhất , trong khi hidden có mức ưu tiên cao nhất , nếu có bất kỳ đường viền xung đột nào khác được đặt.

    Các giá trị inset, outset, groovevà ridge tạo hiệu ứng giống như 3D về cơ bản phụ thuộc vào border-color. Điều này thường đạt được bằng cách tạo một "bóng" từ hai màu sáng hơn và tối hơn một chút so với màu đường viền. Hãy xem một ví dụ:

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Đặt độ rộng đường viền

    Thuộc tính border-width chỉ định chiều rộng của vùng viền. Nó là một thuộc tính rút gọn để đặt độ dày của cả bốn cạnh của đường viền của một phần tử cùng một lúc.

    Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:

p {
    border-style: dashed;
    border-width: 10px;
}

Chỉ định màu viền

    Thuộc tính border-color chỉ định color khu vực đường viền. Đây cũng là thuộc tính rút gọn để đặt màu cho cả bốn cạnh của đường viền của phần tử.

    Các quy tắc kiểu sau đây thêm một đường viền màu đỏ xung quanh các đoạn văn.

p {
    border-style: solid;
    border-color: #ff0000;
}

Thuộc tính border rút gọn

    Thuộc tính border là thuộc tính rút gọn để đặt một hoặc nhiều thuộc tính đường viền riêng lẻ và border-width trong một quy tắc duy nhất: border-style, border-color

    Hãy cùng xem ví dụ sau để hiểu cách thức hoạt động của nó:

p {
    border: 5px solid #00ff00;
}

    Nếu giá trị cho một thuộc tính đường viền riêng lẻ bị bỏ qua hoặc không được chỉ định trong khi đặt thuộc tính đường viền, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.

    Chẳng hạn, nếu giá trị của border-color bị thiếu hoặc không được chỉ định khi đặt đường viền, thì color của phần tử sẽ được sử dụng làm giá trị cho màu đường viền.

    Trong ví dụ bên dưới, đường viền sẽ là một đường liền màu đỏ có chiều rộng 5 pixel:

p {
    color: red;
    border: 5px solid;
}

    Tuy nhiên, trong trường hợp của border-style, việc bỏ qua giá trị sẽ khiến không có đường viền nào hiển thị, vì giá trị mặc định cho thuộc tính này là none. Trong ví dụ sau, sẽ không có đường viền:

p {
    border: 5px #00ff00;
}