How to make a border like the picture below?
How do i make a border like the design here. I thought of making a div, giving it height and width, putting a gradient in background and the eventually use absolute positioning. But I'm not sure if that is the best way to do it. If anyone has a better idea, pls let me know.
P.S -> I've seen border gradients but the top border has no gradient so I'm not sure if that can be used or not
6 Replies
Is this design a page you want to replicate?
well anyway here i did an example https://codepen.io/stefanh-at/pen/rNroZLM
I just made the gradient a container of a content div and just have some padding there
If you want to add border radius, make sure to subtract the padding size from the radius for the inner div, otherwise the corners won't match
you can also do this without the wrapper
div using multiple "gradient" backgrounds. Note that both of these techniques fall apart if you want a transparent background. Then you'll likely need a border-image. https://codepen.io/jsnkuhn/pen/zYLymmy1 element, transparent background
https://codepen.io/MarkBoots/pen/oNMJOxo?editors=1100
yep that'll work too. FYI, line 18 is missing a
)