Custom Border Images
With
border-image we can create a custom image that repeats to use as a border! First you will need to create a miniature version of your border in a graphics program such as Photoshop.
What's Happening
The border-image property divides your image into 9 pieces (the sides, the corners, and the middle). Then you set how you want each section to react.
Properties and Values
-
border-image-source: the location of the image
- url('path_to_image.type')
-
border-image-slice: the size of the slices (1 to 4 values → top, right, bottom, and left sides)
- initial
- inherit
- fill (displays the middle of the image)
- %
- numeric value (with or without unit)
-
border-image-width: the width of the border (1 to 4 values → top, right, bottom, and left sides)
- auto
- initial
- inherit
- % or px
- number (multiplied by border-width value)
-
border-image-outset: how far the border image can continue past the border-box
-
border-image-repeat: how the border-image repeats to fill the space(round, stretch, or repeat)
- border-image: the shorthand for the border-image properties (source slice width outset repeat)
In Action
Make sure that you set the border to have a color and a size:
.border1 {border: white solid 10px;
border-image: url('images/borderimage.png') 10 round;}
.border2 {border: white solid 8px;
border-image: url('images/borderimage.png') 5 3 stretch;}
.border3 {border: white solid 10px;
border-image: url('images/borderimage.png') 9% 3% 5% 7% repeat;}
Rounded Corners
With
border-radius we can now have rounded corners! This property will work to make a
border, image or background-color have rounded corners. Border-radius is actually short-hand. You can look up the individual properties if you would like!
Depending on where you are using border-radius, you may need to include a border or background property for the border-radius to display correctly.
Box-sizing
Box-sizing determines whether or not the border and padding areas are included in the set height/width for an element. Including the padding/border in the height and width can sometimes minimize the necessity for mathematic calculations.