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

1. Tạo nhiều viền bằng box-shadow

Đây là cách linh hoạt và phổ biến nhất – bạn có thể tạo bao nhiêu viền tùy ý bằng cách lặp lại nhiều lớp box-shadow.

.multi-border {
    background: #fff;
    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 #fff;
}

Demo:

Ưu điểm: Hỗ trợ border-radius, tạo hiệu ứng đổ bóng giả rất linh hoạt.

2. Kết hợp border và outline

Nếu bạn chỉ cần 2 lớp viền thì có thể tận dụng combo border + outline – nhanh gọn, dễ dùng.

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

Demo:

Lưu ý: Cách này không hỗ trợ border-radius đồng thời cho cả 2 lớp. Nếu cần bo góc tròn, nên dùng cách #1 hoặc #3.

3. Dùng background-clip để tạo hiệu ứng border bên trong

Phù hợp khi bạn cần hiệu ứng dạng avatar bo tròn với nhiều lớp viền nội – dùng padding kết hợp với background-clip: content-box.

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

Demo:

Ưu điểm: Rất hiệu quả cho avatar, ảnh đại diện hoặc nút tròn nhiều lớp.

Kết luận

• box-shadow: tạo được nhiều lớp, hỗ trợ radius, linh hoạt nhất
• border + outline: nhanh, gọn, phù hợp cho layout vuông
• background-clip: dùng cho hiệu ứng lồng viền bên trong, đặc biệt với khối tròn

Tuỳ vào nhu cầu thiết kế UI và cấu trúc layout, bạn có thể kết hợp các cách trên để tạo ra hiệu ứng khung viền hiện đại, nhiều lớp mà không cần HTML phụ hoặc dùng hình ảnh.