zzlogan Posted August 3, 2021 Share Posted August 3, 2021 (edited) Site URL: https://pomegranate-badger-p3wd.squarespace.com/ I'm trying to add a dashed border around a button via custom CSS. Here is the code I have so far, .button-block .sqs-block-button-element { color: black !important; border: 2.22px dashed #000000 !important; padding: 10px 44px !important; } Currently, there are too many dashes, and I'm trying to "space" them out more. I'm trying to increase the length of each individual dash, please see attached. Would anyone know how to adjust this? changing the border: 2.22px isn't working, just makes the line thicker (and I'm trying to keep the same thinest of each dash). Edited August 3, 2021 by zzlogan adding edits Link to comment
iamdavehart Posted August 3, 2021 Share Posted August 3, 2021 This is one of those questions where the answer should be simple, but CSS doesn't give you control over the spacing between the dots/dashes. Which means that any answer that gets you exactly what you want can become more than a little complex... First option here is that you can fake the border with a background-image. Look here and there's a generator someone wrote on codepen that will help you get something you want. you can then just copy the css it outputs into your button css. there's also a lot of fancy options available here too, including animating stuff etc. More Control Over CSS Borders With background-image | CSS-Tricks However, you might notice that CSS actually uses a different algorithm to draw a dashed border, i.e. it will always draw L shapes at every corner and then make sure that the corners have the right dash length, which this background image approach doesn't do. So if you want to be pixel perfect that makes things a little trickier too. if you want to do that you have to build a background image and then slice it up into 9 squares using the css border-image properties. it's tricky to be honest, but it can be done. try this for example: .button-block .sqs-block-button-element { border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMCAwIEwgNiAwIDYgMyAzIDMgMyA2IDAgNiBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZD0iTSAwIDIxIEwgMCAyNyA2IDI3IDYgMjQgMyAyNCAzIDIxIFoiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMjcgMjEgTCAyNyAyNyAyMSAyNyAyMSAyNCAyNCAyNCAyNCAyMSBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBkPSJNIDIxIDAgTCAyNyAwIDI3IDYgMjQgNiAyNCAzIDIxIDMgWiIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjAiIHk9IjEwLjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjI0IiB5PSIxMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PC9zdmc+") 6 / 8px / 10px round; } I generated the SVG image its using as a background, but haven't made it up as a reusable codepen yet to allow you to generate one. I think you'll be fine with the first option, but when I get time I'll make up the border-image one as a codepen and post the answer here zzlogan 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
zzlogan Posted August 4, 2021 Author Share Posted August 4, 2021 @iamdavehart thank you for this input and feedback! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment