Preface
In the below article, We learn 4 ways to construct an element border without using CSS’s border property:
If you just need to construct an element border in the production environment, the best way is using border property. When we need to construct multiple borders or complex borders, we can compose these ways to achieve an amazing visual effect.
In this article, I will present how to construct multi borders and a border with multiple colors.
Multiple borders
To construct multiple borders, we need to pay attention to which box may be affected and the stack order while using outline, box-shadow, filter, background-image CSS property.
In Chrome, if we set outline and box-shadow without inset at the same, the box-shadow will be not working.
For filter , box-shadow , background-image supporting multiple values, we can use the feature to construct multiple borders. The following figure shows how to construct with box-shadow :
You can construct as many borders as you want with repeating the box-shadow values.
Multiple color border
I have seen some website header borders with multiple colors, which looks very cool. We can do it with the pseudo-element ::before and :after
By using pseudo-element, we can set up to 3 colors. If we want more colors, it looks like very difficult.
In the previous part, we use box-shadow to construct multiple borders with its spread-radius value, it also supports other values:
box-shadow: inset | offset-x | offset-y | blur-radius | spread-radius | color
We can use the offset-x to set different colors, so we can construct as many colors as we want:
The first value of box-shadow is used to clear the box-shadow effect. If without this value, it looks like the following figure:
We can also use background-image to achieve the same visual effects:
For linear-gradient supporting multiple values, the colors of the border have no limitation.
Conclusion
In this article, we learn how to use outline, box-shadow, filter, background-image CSS property to construct the multiple borders, and use box-shadow , background-image to construct multiple color border. All of the code of this article can be found in Codepen.io:
The box-shadow is powerful while constructing complexity visual effect, it can even use to show picture, you can view more on https://github.com/zhangxinxu/boxShadow.
Hope this article can help you, you can learn more CSS practical skills by following articles: