Border only in corners
Hello, Could does anybody know how to get borders only in corners? instead of the top border going all the way across only having like 10% of it, and then doing the same thing with the left corner having 10% of it to form like a L in the corner? Thank you.
5 Replies
here's my 6am attempt: https://codepen.io/jsnkuhn/pen/vYwmEPZ?editors=1100 Added the border as a pseudo element so we can
mask it.
as a side note: Have a vague memory of a working draft "border-clip" property but no browser implements (not even a test implementation yet), so super easy in the future (assuming browser vendors ever bother adding it) but for now it's really annoying to do.there are some nice solutions already. just wanted to try an option without the use of pseudo elements or mask.
just on the main element https://codepen.io/MarkBoots/pen/mdYmRdo
This is also a really good use case for the Paint API for anyone that might be willing to go that route: https://houdini.how/#demo-cornerbox
Houdini.how
The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today.
Thank you guys.
I appreciate the help