CSS - Wavy border

Question

I need to create a wavy border for a div and I am trying to do that with pure CSS, no images.

I know there is this answered question here, but what I want to create is an infinite sine wave as border.

Any ideas?

+1 to counter act the loser who marks you down without comment. — Brian Ogden, Jan 26 '14 at 00:07
One more possibility to do this: http://neisbut.github.io/textAnnotator/ — Tony, Jun 16 '14 at 03:16

score 0 · Answer 1 · answered Jan 26 '14 at 00:05

0

I think there is no use hacking CSS to do things like this when other tools offer it much easier and less tricky way. You could for example use some SVG vector graphics to do something like this.

answered Jan 26 '14 at 00:05

Martin Zikmund

38,440
7
70
91

7

SVG Vector Graphics? Is that some kind of recursive backronym like PHP Hypertext Preprocessor? – Joeytje50 Jan 26 '14 at 00:10

score -1 · Answer 2 · answered Jan 31 '14 at 14:38

-1

I finnally got it. You just have to use multiple radial gradients, using elipses and changing each background position to fit into the wave. Then, you just need to repeat it :)

See this link to get the effect

answered Jan 31 '14 at 14:38

Guilhermevrs

2,094
15
15

2

The link is broken – Solomon Ucko Mar 16 '16 at 23:28
@Guilhermevrs Please add some code to your answer :) – Chris Happy Apr 03 '18 at 22:41

CSS - Wavy border

2 Answers2