Dividers
About
Here are some images that are designed to be used as dividers on pages.
For seamless dividers, I've included a CSS code so you can use them as a class for a hr tag. Please replace the image source in the code with your own hosted graphic. You can click on the dividers themselves to download the image.
Hearts
.classname {
height: 49px;
border-image-slice: 0 37 49 37;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 8px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 10px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 8px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 10px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 13px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 20px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 30px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 21px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 10px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 18px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 19px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 12px;
border-image-slice: 0 13 12 13;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
Stars
.classname {
height: 12px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 19px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 19px;
border-image-slice: 0 37 49 37;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 62px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Plants
.classname {
height: 50px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 15px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 33px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 30px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 10px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 21px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 17px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 34px;
border-image-slice: 0 56 34 56;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 27px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 38px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 23px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Weather & Water
.classname {
height: 21px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 39px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 38px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Animals
.classname {
height: 90px;
border-image-slice: 0 0 90 71;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: space space;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 18px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 76px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 40px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 60px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 23px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 13px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 17px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Food
.classname {
height: 43px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 20px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 39px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 20px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 16px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 23px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 45px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 23px;
border-image-slice: 0 19 23 19;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 21px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 29px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Seasonal
.classname {
height: 47px;
border-image-slice: 0 39 47 37;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 67px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 29px;
border-image-slice: 0 56 34 56;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 21px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 27px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Characters
.classname {
height: 63px;
border-image-slice: 0 36 63 38;
border-image-width: auto auto auto auto;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url(YOUR LOCATION OF DIVIDER GRAPHIC)}
.classname {
height: 52px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 41px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 35px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
Misc./Multiple
.classname {
height: 20px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 15px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 20px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 9px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}
.classname {
height: 28px;
background-image: url(YOUR LOCATION OF DIVIDER GRAPHIC);
border: none;
}