Borders

To use these borders, save the image file (the smaller square), edit/recolor as you see fit, and upload to your own site. Use the code inside of each block and be sure to change the url.

The code provided will stretch to any size, but you can set a specific size by modifying the width and height characteristics. (If you don't set the width and height, the pixel details may be lost.) Read more about css border images from Solaria!

        
.floral {
  border: 30px solid transparent;
  padding: 10px;
  border-image: url(borders/floral.png) 30 30 round;
  overflow: auto;
  margin: 5px;
  }

This box is 460 px wide by 400 px tall.

        
.floral2 {
    border: 21px solid transparent;
    padding: 15px;
    border-image: url(borders/floral2.png) 21 round;
    overflow: auto;
    margin: 5px;
    }

This box is 466 px wide by 333 px tall.

        
.thistle {
    border: 26px solid transparent;
    padding: 15px;
    border-image: url(borders/thistle.png) 26 round;
    overflow: auto;
    margin: 5px;
    }

This box is 549 px wide by 394 px tall.

        
.lily {
    border: 26px solid transparent;
    padding: 15px;
    border-image: url(borders/lily.png) 26 round;
    overflow: auto;
    margin: 5px;
    }

This box is 460 px wide by 364 px tall.

This box is 507 px wide
by 360 px tall.

            
.morningglory {
      border: 26px solid transparent;
      padding: 10px;
      border-image: url(borders/glory.png) 26 round;
      overflow: auto;
      margin: 5px;
      }

This box is 498 px wide by 230 px tall.

        
.vines1 {
    border: 23px solid transparent;
    padding: 10px;
    border-image: url(borders/vines1.png) 23 round;
    overflow: auto;
    margin: 5px;
    }

This box is 495 px wide by 220 px tall.

        
.vines2 {
    border: 16px solid transparent;
    padding: 10px;
    border-image: url(borders/vines2.png) 16 round;
    overflow: auto;
    margin: 5px;
    }

        
.mini1 {
    border: 11px solid transparent;
    padding: 10px;
    border-image: url(borders/mini1.png) 11 round;
    overflow: auto;
    margin: 5px;
    }

This box is 448 px wide by 349 px tall.

This box is 489 px wide by 240 px tall.

        
.mini2 {
    border: 9px solid transparent;
    padding: 10px;
    border-image: url(borders/mini2.png) 9 round;
    overflow: auto;
    margin: 5px;
    }

This box is 493 px wide by 208 px tall.

        
.mini3 {
    border: 11px solid transparent;
    padding: 10px;
    border-image: url(borders/mini2.png) 11 round;
    overflow: auto;
    margin: 5px;
    }

This frame will stretch to any size without losing detail. For display purposes, I have given it 5px of padding, but it works well with 0px padding and a background image to give the impression of a framed picture.

        
.frame1 {
    border: 18px solid;
    border-image: url(borders/frame1.png) 18 round; 
    margin: 5px;
    }

This frame will stretch to any size without losing detail. Due to the size of the design in the corners, there is a significant amount of empty space on all sides built into the frame itself; the dimensions may require some manual adjustment to fit your purposes.

        
.frame2 {
    border: 50px solid;
    border-image: url(borders/frame2.png) 50;    
    margin: 5px;
    }

        
.frame3 {
    border: 10px solid;
    border-image: url(borders/frame3.png) 10 round;
    padding: 5px;
    margin: 5px;
    }

        
.frame4 {
    border: 30px solid;
    border-image: url(borders/frame4.png) 30 round;
    padding: 5px;
    margin: 5px;
    }

Borders

Return