CSS Border Sides

 Đường viền - Các cạnh riêng lẻ

Từ các ví dụ ở các trang trước, bạn đã thấy rằng có thể chỉ định một đường viền khác nhau cho mỗi cạnh.

Trong CSS, cũng có các thuộc tính để chỉ định cho mỗi đường viền (bên trên, bên phải, bên dưới, và bên trái):

Ví dụ:

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Kết quả trả về:

Ví dụ ở trên cho cùng một kết quả như thế này:

p {
    border-style: dotted solid;
}

Vì vậy, sau đây là cách nó hoạt động:

Nếu như thuộc tính border-style có bốn giá trị:

border-style: dotted solid double dashed;

• đường viền trên là dotted
• đường viền bên phải là solid
• đường viền dưới là double
• đường viền bên trái là dashed

Nếu như thuộc tính border-style có ba giá trị:

border-style: dotted solid double;

• đường viền trên là dotted
• đường viền bên phải và đường viền bên trái là solid
• đường viền dưới là double

Nếu như thuộc tính border-style có hai giá trị:

border-style: dotted solid;

• đường viền trên và đường viền dưới là dotted
• đường viền bên phải và đường viền bên trái là solid

Nếu như thuộc tính border-style có một giá trị:

border-style: dotted;

• Cả bốn đường viền là dotted

Ví dụ:

/* Four values */
p {
    border-style: dotted solid double dashed;
}

/* Three values */
p {
    border-style: dotted solid double;
}

/* Two values */
p {
    border-style: dotted solid;
}

/* One value */
p {
    border-style: dotted;
}

Thuộc tính border-style được sử dụng trong ví dụ ở trên. Tuy nhiên, nó cũng làm việc với hai thuộc tính border-width và border-color. Nghĩa là hai thuộc tính border-width và border-color cũng có thể có từ một cho đến bốn giá trị như thuộc tính border-style.