How to create button with with offset border

How can I create such a border

14 Replies

This looks like something a designer would make that doesn't understand the limitations of the web 😁 My first attempt would be a pseudo-element with a clip-path... not sure what my second attempt would be if that didn't work 😅 Be a lot easier if it didn't have the gradient

Parth•14mo ago

Haha... Yeah 😂... But I'll try to create it using pseudo-element

Kevin Powell•14mo ago

As long as teh border-radius is small enough, clip-path works. If you have a larger border-radius, it's more obvious that the clip path is square. https://codepen.io/kevinpowell/pen/rNoOYKX?editors=1100

Parth•14mo ago

Wow... Thanks a lot @kevinpowell 🙏

sum117•14mo ago

Impressive!!

snxxwyy•14mo ago

@parth7 a pseudo element positioned behind the button with a top and left offset should work if the clip path that Kevin mentioned doesn't work for you

Parth•14mo ago

@snxxwyy he has already provided a solution and it works

snxxwyy•14mo ago

I know, I saw, that's why I mentioned if his didn't work for your situation. Just trying to help man.

Parth•14mo ago

Oh... Cool 👍.. thanks

snxxwyy•14mo ago

Yeah no worries @parth7 it's useful to have knowledge of multiple solutions to these things just in case one doesn't work in all cases. For example I didn't know you could use a clip path for this, so Kevin helped me out here.

capt_uhu•14mo ago

If you'd like to avoid the big clip-path you can accomplish the same thing with mask-composite: https://codepen.io/jsnkuhn/pen/KKbdQOQ?editors=0100

Kevin Powell•14mo ago

I tried exactly this and it didn't work for me... Now I gotta see what we did differently 😅 I had this instead, but it didn't work... but now that I'm doing it on yours, it's working... I wish I kept the non-functional version so I could compare

border: 3px solid transparent;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;

border: 3px solid transparent;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;

I tried and now it worked, so I must have done something stupid.

Choo♚𝕂𝕚𝕟𝕘•14mo ago

I was wondering why you didn't use a border image until I tried it myself and discovered that border radius doesn't work with border images.

capt_uhu•14mo ago

There's a mask-border (hopefully by the end of the year Firefox will support this - it's part of interop2023) take on this in the "make border-image and border-radius work together" thread I made in the csswg github: https://github.com/w3c/csswg-drafts/issues/7550#issuecomment-1304903650

Gaming

Programming

How to create button with with offset border