Menu
How to create multi-color border like image below?
998
To achieve a multi-color border like shown above, we will use the position property and the ::after selector with a color gradient. First, we will make a header area using a HTML <div> class and then we will style it with CSS to have a multi-color border dividing it and the content below.
You can use the border-image property to create a gradient border with 4 colors.
Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.
You can do it without pseudo-elements, just with border-image: linear-gradient
.fancy-border { width: 150px; height: 150px; text-align:center; border-top: 5px solid; border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; }<div class="fancy-border"> my content </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
