Menu
I would like to add a border which is white color at the top left, top right with dark blue, bottom left with dark grey and bottom right with light grey/light blue, with a gradient?
Is this possible with css or should I use a background image?
332
To show gradients for a border with CSS you can use the border-image property. It allows setting gradient values in the same way as the background-image property. Besides the border-image property, you should specify additional properties to actually show border gradient.
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.
PRO TIP: When creating a gradient border in Photoshop, it is important to first create a new layer. Then, use the rectangular marquee tool to select the area where you want the gradient to appear. Next, choose a gradient tool and drag it across the selection. Finally, go to Edit > Fill and choose Gradient.
You could use :before pseudo element and linear-gradient to create border-like effect.
.element {
background: white;
position: relative;
width: 200px;
height: 150px;
margin: 50px;
}
.element:before {
content: '';
position: absolute;
left: -5px;
top: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background: linear-gradient(45deg, rgba(220, 218, 219, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 59%, rgba(125, 188, 220, 1) 100%);
z-index: -1;
}<div class="element"></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
