Init HTML

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 border và outline

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!