Как сделать border в разных цветах в разных отрезках?

Question

[hsnz]

Ребята, всем привет.
Как сделать border в разных цветах в разных отрезках?
Данный вид сейчас вот такой:

.banner-text {
    border-left: 5px solid #ec4863;
    padding: 15px 40px;
    color: #fff;
    margin-top: 170px;
}

Comments

[Tizi]

На будущее в Песочницу вставь. и нам и вам проще будет.

Answer 1

[Ankhena]

Например, вот так: https://jsfiddle.net/xvqm7erg/
Специально показала, что могут быть как плавные переходы, так и четкие.
Можно тоже самое задавать для псевдоэлементов :before :after

Answer 2

[Slasherr]

Предполагаю, что свойствами

border-left, border-top, border-bottom, bottom-right

Comments

[hsnz]

Border будет только Left, возможно его сделать в 5 цветах например каждый по 10px?

Answer 3

[Ku314n]

К примеру:

.banner-text {
    border-left: 5px solid green;
    border-top: 5px solid red;
    border-bottom: 5px solid black;
   border-right: 5px solid blue;
    padding: 15px 40px;
    color: #fff;
    margin-top: 170px;
}