Border màu cầu vồng với Gradient và Pseudo

1. Viền với màu sắc riêng biệt (phân đoạn màu)

Border 1

Cách làm: sử dụng pseudo-element ::after để chèn một dải màu phân đoạn bên dưới phần tử.

HTML

<h4 class="border-1">Border 1</h4>

CSS

.border-1:after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to right,
        hsla(175,70%,40%,1) 16.666667%,
        hsla(150,70%,40%,1) 33.333333%,
        hsla(75,70%,40%,1) 50%,
        hsla(25,70%,40%,1) 66.666667%,
        hsla(10,70%,40%,1) 83.333333%,
        hsla(300,70%,40%,1) 100%
    );
}

2. Viền với màu chuyển mượt (gradient liền mạch)

Border 2

Cách làm: tương tự như trên, nhưng thay đổi thành gradient liên tục từ màu này sang màu khác để tạo hiệu ứng pha trộn.

HTML

<h4 class="border-2">Border 2</h4>

CSS

.border-2:after {
    content: '';
    display: block;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to right,
        #73D2F6, #08C 22%, #7FC400 36%,
        #FFD583 48%, #FFB21E 63%, #FF4D4D 76%, #503873
    );
}

3. Dùng background trực tiếp trên phần tử

Border 3

Cách làm: dùng padding-bottom để tạo không gian hiển thị gradient ở phía dưới phần tử. Không cần dùng ::after.

HTML

<h4 class="border-3">Border 3</h4>

CSS

.border-3 {
    padding-bottom: 5px;
    background-image: linear-gradient(to right,
        hsla(175,70%,40%,1) 16.666667%,
        hsla(150,70%,40%,1) 33.333333%,
        hsla(75,70%,40%,1) 50%,
        hsla(25,70%,40%,1) 66.666667%,
        hsla(10,70%,40%,1) 83.333333%,
        hsla(300,70%,40%,1) 100%
    );
    background-size: 100% 5px;
    background-repeat: no-repeat;
    background-position-y: bottom;
}

4. Dùng ul & li làm border dạng block

Border 4

Cách làm: Tạo các khối màu riêng biệt bằng thẻ <li>, sắp xếp inline. Dễ tùy biến và hỗ trợ hiệu ứng động nếu cần.

HTML

<h4 class="border-4">Border 4</h4>
<ul class="border-4-list">
    <li></li><li></li><li></li><li></li><li></li>
</ul>

CSS

.border-4 {
    margin-bottom: 0;
}
ul.border-4-list {
    list-style: none;
    width: 100%;
    font-size: 0;
    margin: 0 0 15px 0;
    padding: 0;
}
ul.border-4-list li {
    display: inline-block;
    width: 20%;
    height: 5px;
}
ul.border-4-list li:nth-child(1) { background: #2ecc71; }
ul.border-4-list li:nth-child(2) { background: #3498db; }
ul.border-4-list li:nth-child(3) { background: #f1c40f; }
ul.border-4-list li:nth-child(4) { background: #2ecc71; }
ul.border-4-list li:nth-child(5) { background: #3498db; }

Kết luận

• Cần border gradient chia lớp → dùng ::after
• Muốn dùng đơn giản, không cần pseudo → dùng background trực tiếp
• Muốn full custom, từng khối → dùng <ul><li> linh hoạt

Với CSS hiện đại, bạn hoàn toàn có thể tạo viền đa sắc độ, hiệu ứng cầu vồng hoặc gradient độc đáo mà không cần đến hình ảnh. Những kỹ thuật trên rất phù hợp để làm nổi bật tiêu đề, box thông báo, hoặc component trang trí trong các layout hiện đại.