Bài viết này hướng dẫn cách tạo viền (border) với nhiều màu sắc sử dụng Gradient và Pseudo-elements và một số cách khác nếu không sử dụng CSS3.

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

Màu sắc riêng biệt

Các bạn xem ví dụ sau.

Border 1

Cách làm.

HTML

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

CSS

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

Pha trộn màu sắc

Ví dụ.

Border 2

Cách làm.

HTML

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

CSS

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

Chỉ sử dụng background

Ví dụ.

Border 3

Cách làm.

HTML

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

CSS

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

Sử dụng thêm thẻ ul

Ví dụ.

Border 4

Cách làm.

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: 0px;
}
ul.border-4-list {
      list-style: none;
      width: 100%;
      font-size: 0;
      margin: 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;
}

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

Series: Thủ thuật Front-end