A nice easy one today. We are going to create a little non standard border that includes a few different colors to spruce things up.
With the help of the linear-gradient() function, we are going to create solid colored sections instead of gradients. Yep – regardless of the name, we can create solid colors.
A demo of this tutorial can be found here.
Find a HTML element you want to add a border to
I will be using an article element for my demo as I am imagining I am displaying a list of blog posts and each post will be wrapped inside this article element to make it more semantic.
<article>
<h3>Nisi lectus mattis turpis</h3>
<p>Nam at mauris a lectus rutrum lobortis...</p>
</article>
Add the basic CSS
Ok, so we have our HTML element chosen, next we add a few CSS properties to make sure our article element won’t act strangely. I always like to float elements that will hold child elements and give them a 100% width.
article {
float: left;
width: 100%;
margin-bottom: 30px;
}Where the magic happens
Now, with the article element structure sound, it’s time to create our background gradient solid colors.
article {
...
background-image: linear-gradient(90deg,
#222c41,
#222c41
);What we are doing here is the following:
background-image: linear-gradient(
- 90deg Setting the angle of the gradient to be 90 degrees, or from left to right. By default, the gradient flows from top to bottom.
- #222c41, First set our chosen color.
- #222c41 Next, add the same color as previous as we don’t want to make this a gradient, but a solid color.
Now we will get something like the below.
The gradient is indeed flowing from left to right, but as we are using the same color in both options, it forms one solid color. Now, let’s add another color to the mix.
article {
...
background-image: linear-gradient(90deg,
#222c41,
#222c41 25%,
#de466c 25%
);Now, we have added our new color, but the observant among you will have noticed some extra percentage values have snuck in. These are called color-stops and instruct the browser when to stop the color.
- #222c41, First set our chosen color
- #222c41 25%, Next, add the same color as we want this to be a solid color, but with the an added color-stop of 25%.
- #de466c 25% Next up, we add our new color and this will start from 25% onwards and take up the remaining area.
So now we are left with the below.
Now, add in the rest of the colors
article {
...
background-image: linear-gradient(90deg,
#222c41,
#222c41 25%,
#de466c 25%,
#de466c 45%,
#ccc 45%,
#ccc 75%,
#de466c 75%
);
}The above code includes four ‘gradients’ at different color-stops.
- Color-stop 1: 0% – 25% = Navy color.
- Color-stop 2: 25% – 45% = Pink color.
- Color-stop 3: 45% – 75% = Grey color.
- Color-stop 4: 75% – 100% = Pink color.
Now, we have our completed multicolored pattern.
But, it’s a background – not a bloody border! Ah yes, no need to be rude – we just need a few more lines of CSS and we’re done!
Defining our border
To wrap this up, we just need to alter the background position, size, and a property to not allow the gradient to be repeated to make it into a faux border.
background-size: 100% 6px; /* Make the width of the gradient 100% in width and 6 pixels in height */
background-position: bottom; /* Position the gradient at the bottom of the article element */
background-repeat: no-repeat; /* Don't repeat the background gradient */
The finished product
The full CSS
article {
float: left;
width: 100%;
margin-bottom: 30px;
background-image: linear-gradient(90deg,
#222c41,
#222c41 25%,
#de466c 25%,
#de466c 45%,
#ccc 45%,
#ccc 75%,
#de466c 75%
);
background-size: 100% 6px;
background-position: bottom;
background-repeat: no-repeat;
}
article:last-child {
background: none;
margin-bottom: 0;
}Hope you enjoyed this this one – have fun with it.
