Is there any way to color a border corner in CSS?
I.e. : border-top-left-corner-color: red
If it can't be done in pure CSS, can it be done with some JS/jQuery trickery?
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.
Use two gradients: one rotated 90deg and the other rotated -90deg. Use two color stops: #880015 at 50% and #fff at 50% Use a background-size of 100% width and 3px in height, i.e. background-size: 100% 3px. Position the two backgrounds at the top left and bottom left of your element.
If you want to set a border to the left and right, use three values (write none to the first and third values). Example: border-style: none solid none none; // border will be applied only to the right side. border-style: solid none; // border will be applied only to the top and bottom sides.
You can color each border corner seperately with 4 pseudo elements and style each corner's border color, width and style seperatly :
DEMO
.outer{
width:500px;
height:500px;
background:gold;
position:relative;
}
div:before, div:after{
content:'';
position:absolute;
height:10%;
width:10%;
}
.outer:after{
right:0;
border-right: 3px solid red;
border-top: 3px solid red;
}
.outer:before{
border-left: 3px solid green;
border-top: 3px solid green;
}
.inner:before{
bottom:0;
border-left: 3px solid black;
border-bottom: 3px solid black;
}
.inner:after{
bottom:0; right:0;
border-right: 3px solid blue;
border-bottom: 3px solid blue;
}
<div class="outer">
<div class="inner"></div>
</div>
A little bit late ..
Here is my solution
.test {
width: 200px;
height: 100px;
border: 10px solid transparent;
background-image: linear-gradient(0deg, white 0%, white 100%),
linear-gradient(0deg, green 0%, green 100%),
linear-gradient(0deg, red 0%, red 100%),
linear-gradient(0deg, yellow 0%, yellow 100%),
linear-gradient(0deg, blue 0%, blue 100%);
background-origin: padding-box, border-box, border-box, border-box, border-box;
background-repeat: no-repeat;
background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
background-position: top left, top left, top right, bottom left, bottom right;
}
<div class="test"></div>
The colors are achieved as 4 backgrounds set to border-box. They are then masked by a white background set to padding-box.
Notice that the thickness of the border is still set with the border property. (but the border itself is transparent)
An alternate approach, using a pseudo element to mask the inner part
.test {
width: 200px;
height: 100px;
border: 10px solid transparent;
background-image: linear-gradient(0deg, green 0%, green 100%),
linear-gradient(0deg, red 0%, red 100%),
linear-gradient(0deg, yellow 0%, yellow 100%),
linear-gradient(0deg, blue 0%, blue 100%);
background-origin: border-box, border-box, border-box, border-box;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
background-position: top left, top right, bottom left, bottom right;
border-radius: 40px;
position: relative;
}
.test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
background-color: white;
border-radius: 30px;
}
<div class="test"></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