Hi there, is this possible in CSS? the button background rough edges and also the blue container with the rough edges. https://snipboard.io/ByUG1E.jpg
I tried this CSS svg https://danieldarrenjones.com/articles/how-to-make-rough-edges-with-css-and-svgs and it’s far from the design.
If it’s not possible, is it advisable to use images instead of CSS?
Thank you!
The effect can be done with a combination of CSS and an image via the border-image property.
The image may be SVG or otherwise, so long as it has the rough edge look you want.
Border image can be tricky to set up, but there is info here:-
I just took a look at the tutorial, actually cut to the chase and looked at the Codepen example and I don’t see why it shouldn’t work like that without any image file.
Interesting that you can apply the effect to other HTML elements like text too by adding the class.
Thank you for this. But is there a way I can do that in pure CSS? or should I just use the image as background for the container and the button instead.
One thng to be aware of, to use that div as an actual conatiner for your content, you probably don’t want to apply that turbulence to the container itself. If you do it will distort the content inside, so use a pseudo element like my example.
It can be done with a clip-path.
Update:
I tried on my end using CSS+SVG : https://snipboard.io/P9KHZj.jpg
PSD: https://snipboard.io/cjEDZN.jpg
Is there anything I can do to make it more like the PSD or should I use images as background. Thanks!
It looks pretty close to me.
Obviously you can’t match the psd exactly as that’s just something someone has drawn as a fixed shape and the web is not a fixed shape. It needs to stretch with content and be responsive.
As you mention you could do this with an image (or border-image (multiple border images) to allow it to scale nicely) and as the images are cut from the PSD they will look much the same.
If it were me I’d just fiddle with the svg until its close.
Here was my attempt.
This is an example using a (PNG) border-image. It only requires a single image, but there is a bit of work setting the image up to work correctly. It must have the element fill texture in the middle, which will tile seamlessly at the slice point, the all 4 sides with alpha channel, which must also tile at the same slice point, then all 4 corners which must tile also.
It is fully responsive with the image scaling to a size where an integer number of tiles with fit the element size.
Luckily I had the image already prepared having previously used it in a site.
But the trick here is to have the image prepared to properly tile and setting the slice value to the tile edge.
@PaulOB do you think it has support on iphone? because background is not showing on my mobile device when I check the codepen. Thanks!
There seem to be a couple of typos in the svg that I copied. The pc should be % and then it will show in the iPhone.
I’ve updated the pen and it now shows on my iPhone although you may need a media query to change font size and make it all fit better.
I’ll double check when I get back to my desktop later 
Ignore that post. I’m working on it now as there seems to be something else going on.
Thank you @PaulOB! I really appreciate your help.
