Custom CSS Border Images

w3schools' tutorial

Borders can be made from images! (though they should be designed with use as borders in mind)

Here is an image I made to be a lace border:

Your source image for your border is split into nine quadrants (3x3):

After you design the image for your border, all you need is two lines of CSS to give your element a custom border that automatically adjusts to the elements dimensions!

Just like with regular borders, you can adjust the border width (10px compared to 20px above)

The sides the border is on can be specified as well

However, border-radius does not work



Use the following to style your element:

border: 10px solid transparent;
border-image: url("blacklace.png") 17 round;

You can set the width to any size you like, but the color should be transparent

The dimension for the border-image (the "slice") is best at 1/3 of the source image's width/height, but if no background is given feel free to experiment:

15
16
17
18
19
20
21
22

My source image is 51px by 51px, so 17 works the best

The 1/3 guidline is particularly true for cases where your border has transparency, and you want the background to end where the border begins (if you want the background behind the border feel free to play around with the slice size)

By default, the background will span behind the border:

But this can be changed by setting the background-clip to padding-box

Unfortunately, this leads to space between the your border and the background when the slice is greater than 1/3 of the source image's dimensions

15
16
17
18
19
20
21
22

To combat this, background-image-outset can be used (while leaving the background-clip to default (border-box))

I set the outset as 4px less than the border width, its not a perfect fix but it helps:

15
16
17
18
19
20
21
22

(if the above boxes do not have borders, your browser may not support this property)

Alternatively, a different source image could be used, where the center is filled in, creating a thick dark border where the space would be:


15
16
17
18
19
20
21
22




These examples have all had the sides repeat, rather than stretch, so here is a stretched example:

border: 10px solid transparent;
border-image: url("blacklace.png") 17 stretch;

This of course would look better with a source image designed with stretching in mind, as my lace image was not



The border image can also fill inside the border:

border: 10px solid transparent;
border-image: url("blacklace.png") 0% round;
border-image slice: fill;

0%

5%

10%

15%

20%

25%

30%

35%




My Border Images:

My lace border images - feel free to use: (credit on your page would be appreciated but not required <:3)

higher res lace borders: (with mesh center for larger slice values)


compare the orginal for a thick border

to the higher res lace image

which of course would also work for thin borders too


slice: 29

slice: 30

slice: 31

slice: 32

slice: 33

slice: 34

slice: 35

slice: 36

slice: 37

slice: 38

slice: 39

Rainbow borders:


use stretch on the solid borders
and since they are solid with no transparency, you don't need to worry about space between the border and the background

round vs stretch does not matter for the ones with only corners

for these, the corner is not 1/3 the width of the image (it is 58 px for these, 32 for the one without corners)