In this tutorial, we will take graphical borders from the 1800s and turn them into a repeating CSS border for your website. The following technique will work for border made of almost-identical repeating elements. We’ll use the free Inkscape illustration software.

The end result will be this kind of border that neatly fills the parent element, no matter what the parent’s width is. Go ahead and pull at the “resize” tab to make it wider or narrower:

We will follow these steps:

• Vectorizing the image of a border
• Separating each repeating element from its neighbours
• Rearranging the elements so they can repeat easily using CSS
• Creating CSS code to ensure we’ll never cut off our border mid-element

Getting the image

We’re going to work with the borders at Recueil des divers caractères, vignettes et ornements de la fonderie et imprimerie de J. G. Gillé from 1808 – organically grown and Copyright Free!

Choose a border that is made up of the same width characters repeating.

I’ve chosen this one for our exercise:

We zoom in on it and take a screenshot.

Vectorizing

We will turn this flat image into a vector (SVG) so that we can easily separate the wreaths and space them out for even repetition.

Import the image into the Inkscape program (although Adobe Illustrator will also work)

Go to Path->Trace To Bitmap

You will end up with a black and white vector like this:

Separating the elements

Now, we split this one big path into parts. Go to Path->Split Path and you’ll end up with a bunch of non-overlapping little portions.

You can see the blue outlines showing distinct paths now:

But look at the red arrows where some of the wreaths have merged together. This is due to the way the original print was done – where the ink overlapped between separate elements.

We can split up that merged path by creating a rectangle on top (shown in red), selecting both the rectangle and the path, and then going to Path->Difference to cut the underlying path, then go to Path->Split Path to divide them into 2 separate paths.

You can also split the shape along thin curve by drawing with the Pen tool (don’t close the curve – just press ENTER to leave a line segment). Then, select the curve and the underlying path and go to Path->Fracture.

Go on and cut all the shapes away from each other

Then, go on and select the paths that make up each pattern element (select them, then group them with CTRL+G). When you’re done grouping, you’ll get paths that roughly correspond to individual pattern elements:

Making each wreath the same width

Next, we want each element to be the same width so we can predictably repeat the pattern every X pixels.

Figure out a good average width & height for one of these elements. I do it by selecting one and looking at the Width and Height in px at the top bar. In the example, the repeating element is 22.924px wide by 21.815px high.

Let’s go ahead and make each element 22px wide. Select one object and change its width manually to 22px while keeping the height “locked” to the same aspect ratio with the lock icon.

Select your one object and copy it. Then, select all the other objects:

Go to Edit->Paste->Size Separately. This will give all of them the same height & width as the “reference object” you just copied. This is just a fast way to force all of them to have the same width – there are probably other ways to do the same thing.

Then we go to Object->Align and Distribute->Grid

The settings in the screenshot will distribute them horizontally with no spaces in between. If your pattern is the kind that looks good with spaces between the elements, then you can enter 1 or 2 px in that “X:” field.

We apply the grid and get elements of the same width and height, touching:

You can adjust height, and vertical offset to break up the pattern a little if you want:

Give them whatever fill-colour you want and export as “Plain SVG”

Creating CSS that never cuts off mid-element

Next, we are going to set up the SVG pattern as a repeating background on an <hr> element. If we simply let the pattern repeat across 100% of the element’s width it’ll often cut off mid-element:

The key part of our CSS: only letting <hr> have a width value that’s a multiple of 22px (the width of each repeating element). The width will never be set to a value that cuts off an element.

We can do this with the CSS round() function:

width: round(down,100%,22px);

Above, we are setting the width of the element to 100% of its parent, but rounding it down to the closest multiple of 22px.

Here is what the full code looks like, with the “background-image” declaration, horizontal repetition and width:

hr {
		width: round(down,100%,22px);
		background-image: url( 'exported-image.svg' );
		background-repeat: repeat-x;
		height: 25px;
		border: 0;
	}

Note: if the <hr> element has a max-width declared upstream, it might still create cutoff problems. Max-width always takes precedence over the rounded width we set here, and cuts off the repeating border regardless.

You’ll get cut-off effects like this:

One solution is to surround your <hr> element in a <div> – that way it is the div element that’ll get clamped down to the max-width and will leave the hr to be rounded properly. Another solution is to add an !important max-width onto the <hr> definition, like max-width: round( down, "max-width of the parent", 22px)

You can scale up the repeating elements by setting background-size: auto 55px; (height = 55px, width = scale up proportionally), but you’ll have to also set height: 55px, and set the width to round() down to an appropriately-scaled up pixel width.