Custom border - possible?
Hi everyone!
I need to create the double border border in the attached image, and have it dynamically fit the content inside (be it image or text). what would be the best approach?
25 Replies
currently, you can't do it, because of this:
https://discord.com/channels/436251713830125568/1364233248913490004/1384167980073619561
lets just say that it is new enough to the point that there's not even an mdn page
you can probably fake it, but, it's way too much squeezing for no juice at all
that's what i thought too. and SVGs can't somehow allow content inside and adapt to them,can they 😛
you can shove anything you want inside a
<foreignObject> but it is inside an svg
you can make a background with it, but ...hmmm i don't mind this. does it accept images and text?
you can use the
<text> and <image> elements
is this for a personal project or something public?public
don't use an svg
seriously, just make the borders simpler
you can use the
border-style property for double borders:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-styleneat, thanks! i'll check that out.
or you just use multiple (pseudo)-elements, if you need more control
that design is very overcomplicated
on a different note, i've seen some people use dropshadows to replicate borders, but in a way where they don't really add to what a regular border does. any reason they might do that?
i would do that as a way to add an outline instead, without messing with the
outline propertymmm to what benefit?
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow <-- follows border radius, as far as i can see
https://developer.mozilla.org/en-US/docs/Web/CSS/outline <-- outline's implementations had issues with border radius for a very long time
Thanks!
so here's an attempt. Seems like a dumpster fire waiting to happen though. Needs more vars to be maintainable at all. Stuff like this is why we need
corner-shape : https://codepen.io/jsnkuhn/pen/PwqLGvYthat is some nice fakery
it has some issues and needs some tweaking, but it is really really good
Why not use clip path & a pseudo element?
that's what he did
Ohh sorry
there are a bunch of different ways to do this with clip path and pseudo elements. The reason I chose this one is it also incorporates the border property so it would be easier to run an at supports for
corner-shape. I added that to the pen.if i ignore the double border and just try to add one border with the slants etc, is that doable easily?
the slants are the harder part
you wouldn't need all the pseudo elements. the background, clip-path and border could just go right on the element itself. But it's still going to be fiddly at best until
corner-shape.