Bài viết này hướng dẫn cách tạo nhiều khung viền (border) với thuộc tính box-shadow, bạn vẫn có thể kết hợp với thuộc tính border hoặc outline nếu muốn.

Các cách tạo nhiều Border với CSS3

Thuộc tính box-shadow

Bạn có thể tạo bao nhiêu viền tùy ý với thuộc tính này, xem ví dụ sau.

Cách làm

.multi-border {
    box-shadow: 
        0 0 0 5px hsla(175, 70%, 40%, 1),
        0 0 0 10px hsla(150, 70%, 40%, 1),
        0 0 0 15px hsla(75, 70%, 40%, 1),
        0 0 0 20px hsla(25, 70%, 40%, 1),
        0 0 0 25px hsl(0, 0%, 100%);
}

Với ví dụ này, viền sẽ có chiều rộng 5px và màu sắc HSL, bạn có thể tham khảo tại đây.

Thuộc tính borderoutline

Nếu bạn chỉ muốn có 2 đường viền, bạn chỉ cần sử dụng 2 thuộc tính này là đủ, ví dụ.

Cách làm

.multi-border {
    border: 5px solid #73D2F6; 
    outline: 5px solid #FFB21E;
}

Lưu ý: Cách này chỉ sử dụng được cho hình vuông (không có border-radius).

Thuộc tính background-clip

Cách này được sử dụng nếu bạn muốn làm như sau.

Cách làm

.multi-border {
    padding: 3px;
    background: #FF4D4D;
    border: 3px solid #FF4D4D;
    background-clip: content-box;
}

Chúc các bạn thành công!