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.
Alexandra Pierson
CodePen
CSS Scallop Border
Message with a scallop bottom border...
4 Replies
Tok124 (CSS Nerd)
So you want it like this?
No description
Tok124 (CSS Nerd)
If so, set the size of the linear-gradient to 100% on the X Axis instead of that calc() thing
No description
Lexi
LexiOP2w ago
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?
Tok124 (CSS Nerd)
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.

Did you find this page helpful?