The web site of fred-site

SVG Shape
Clipping Path
Mask
Border-Image

This makes an impressive result! If I could, I'd use this for every relevant purpose.

That is, if you're on desktop.

Mobile devices destroy the hell out of this effect. Dunno a fix, because I've been looking it up and finding no help (yet.)

Even when using a desktop, there may be issues. The method of typing "on" the paper is possible only with workarounds. Typing directly into the element scrambles up the text just as it does the background and edges. And, the very same issues I've noticed on mobile replicates on desktop if I try to do a relative height rather than a hard-coded value.

(If you're curious, I used the "negative margin" hack. Looks like it plays better with mobile.)

I found the original tutorial on getting this to work here, but I couldn't get it to work since I'm unfamiliar with svgs at the present. So, I used some code shared on the Mozilla help docs page and tweaked the numbers. The browser really didn't care for having a specific value undefined.

Lacus torquent nulla ullamcorper habitasse. Orci cursus pretium dictumst fames mollis, habitant sit. Mollis placerat natoque commodo aliquet conubia mus. Integer ultricies ridiculus tempus molestie elit sagittis scelerisque tempor ligula nulla. Sodales libero nam cum lacus eget suscipit feugiat sem leo vestibulum? Natoque, sem hac pharetra torquent commodo ultrices fames sapien. Lacus cursus ridiculus primis eu primis risus hendrerit ultricies. Velit sit maecenas hac faucibus iaculis amet interdum vestibulum auctor torquent. Leo donec ridiculus hendrerit sed. Sodales cum congue aliquam nascetur elementum?

Sem sollicitudin cum fringilla? Fermentum accumsan donec himenaeos rhoncus duis litora fringilla euismod pulvinar conubia dolor erat. Lacinia lacinia condimentum adipiscing quisque mollis neque non ut? Dictumst mauris dignissim volutpat dui amet. Condimentum lectus sociis mollis. Auctor id himenaeos proin vitae dui dui eleifend sapien. Nostra proin aliquet nisi maecenas imperdiet inceptos risus molestie eget. Duis facilisis sociosqu, aliquet sociis blandit vehicula luctus potenti? Ipsum vel rhoncus feugiat quisque? Neque arcu primis lacinia vehicula sit gravida. Habitasse vehicula commodo primis velit. Habitasse iaculis litora erat!

Ultricies etiam nec accumsan nisi habitant augue a est quam ipsum mus penatibus. Non erat montes cubilia et tristique cum facilisi sagittis. Est montes accumsan netus dictumst pretium leo ultrices ut? Aenean eros tristique nisi ut eleifend sodales luctus nostra himenaeos sed erat amet? Magnis nulla urna bibendum tristique magna nisi libero netus nascetur ligula maecenas. Imperdiet.

Scelerisque ipsum tincidunt tempus lacus eget feugiat non nunc etiam nostra. Tincidunt eget sociosqu sagittis non faucibus laoreet, erat sociosqu adipiscing rutrum penatibus. Molestie semper etiam penatibus nostra suscipit faucibus. Justo tempus turpis senectus laoreet leo tellus congue eros, dapibus dictum hac luctus? Rutrum quisque torquent feugiat massa metus augue magna. Non tempus, et posuere praesent ipsum rutrum cubilia iaculis faucibus nullam nunc urna. Volutpat metus suspendisse.

Congue congue lobortis massa non posuere. Consequat urna fusce lorem eget montes faucibus pulvinar metus cras quam ante. Dignissim urna turpis porta nam sociosqu massa at egestas. Sociis arcu aliquam vivamus lacinia ridiculus mattis amet libero. Elementum tempor facilisis ad diam. Pellentesque pharetra torquent risus himenaeos. Tempor interdum quam auctor euismod. Ultricies per ullamcorper nostra elementum non curae;. In purus fringilla felis eget mollis ac.

This one uses svg vectors as well, but the effect is far too subtle for my tastes. The original source used a much smaller div with significantly fewer words, so it might "scale" with the width of the div.

Second try, a slight modification of this code. It had the best jank clipping path that I could find.

Okay: To get this one to work, I had to specifically express this as a "stylesheet" in the header. Dunno what that was about, but good to know in the future.

This method utilizes masks, and I like it in some regards. I mostly unfavor it, because the edge of the "paper" is too even. Looks like it was cut on a even cutter that has a design, rather than the paper being torn.

Plus - and I don't know if I'll change it since it bothers me so much - you can see a set border style and width and color only works on edges that aren't masked. The borders are technically set on all edges, but the end doesn't show due to the mask itself.

The site I used to create these scalloped edges is here.

Okay, so: border image.

This just requires you using a "frame" image you can make however you'd like (on the computer) and doing some settings to get everything all nice. The image I used has a transparent interior that fades into any image interior you'd like. That image requires a certain amount of precision, considering the image will be tiled and inconsistencies will be easily noticed. So, if you're blurring the interior and using an image creation program/app, you'd want to cut out the inside and use gaussian blur on a selection rather than blurring by hand.

Support for this method has been around for at least 10 years, and has since been replaced by better methods. I used to be all for this method, until other methods becake prevalent and given me a wakeup call.

Let's see...

Mozilla offers a generator that you can utilize to perfect these models. However, it's incredibly finicky. It'll only make settings for specific dimensions of the relevant div. I tried using a div that wasn't hard coded, and it screwed with my images. Best to use a large image and scale it down rather than the other way around.
Because it uses those hard codes, you'd have to settle for a less realistic "parchment" effect and add a scroll bar for each time you use the div for different purposes.
This isn't something you can just do once and make it fit every circumstance. Depending on the paper background you use, you may need to change the color of the paper edge to get it to fit properly.
Not to mention: making one of these requires making and hosting a new image every time.
SOme options don't make a whole lot of sense, and it takes a bit of playing to get what everything does. I'll tell you something that's most helpful for this method: "border-image-outset" is your friend. It specifies how far out your crunchy edges will be (from the text area) and, without that, you're stuck using incredibly square designs that don't sell the "aged" look as well. The text overlaps the outside of the frame otherwise. Also: If you do use a transparent image interior, you can't use round like I thought you could originally. It has to be stretch, because, apparently, the tiling will alse affect the interior.
I haven't tried using a vector image, just raster-based ones. That makes implementing this more accessible to beginners, but artifacting and aliasing will distort your picture upon close inspection.

Story Time Div Styles