CSS Scalloped Border

Any advice on how to make a scalloped border only on the top and bottom border of an element?

https://codepen.io/Alexandra-Pierson/pen/emOMZKM

This is what I'm currently working with and I can't seem to find a way to just make it along the top and bottom.

CodePenAlexandra Pierson

CSS Scallop Border

Message with a scallop bottom border...

LLexi Any advice on how to make a scalloped border only on the top and bottom border o...

Tok124 (CSS Nerd)•1/10/25, 5:46 PM

So you want it like this?

Tok124 (CSS Nerd)•1/10/25, 5:48 PM

If so, set the size of the linear-gradient to 100% on the X Axis instead of that calc() thing

TTok124 (CSS Nerd)If so, set the size of the linear-gradient to 100% on the X Axis instead of that...

LexiOP•1/10/25, 5:56 PM

Yes! Thank you, do you know if there's a way to just add it to one side without changing the linear gradient or if there's some other practice that I'm missing?

LLexi Yes! Thank you, do you know if there's a way to just add it to one side without ...

Tok124 (CSS Nerd)•1/10/25, 6:00 PM

Changing the linear-gradient is the only solution i can come up with. It may be possible with clip-path or something else, im not really sure, i rarely use the clip-path property so i don't have a bunch of experience using it. You could also play around with mask-composite that could possibly help.