Border Images

Written by

in

Advanced Features

CSS border-images properties are used to create custom borders by setting image as border around any element.

The border-image property takes the image and slices it into nine sections(3×3). It then places the corners at the corner of the border, and the edges are repeated or stretched as you specify. Middle part of image will be ignored.

Border Image

Table of Contents

Example of Image as Border
CSS Border Image Source
CSS Border Image Slice
CSS Border Image Width
CSS Border Image Outset

CSS Border Image Repeat
Border Image Shorthand
CSS Gradient as Border Images
Border Image All Properties

Example of Image as Border

The following code shows a basic example of how to set image as border.

Example

<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: url(/css/images/border.png) 40;
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of setting a 
        border image using CSS
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Source



The CSS border-image-source property specifies the source (url) of an image to be passed as a border to an element.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of setting border image using 
        border image source.
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Slice



The border-image-slice property defines how the image is sliced into regions, which are then used to draw the borders.



The following diagram demonstrates how image is sliced to make border. The image is divided into 9 sections: four corners, four edges, and the center.







The value in the 'border-image-slice' property specifies how far inward from the edges of the image the slicing should occur. It essentially defines the size of the areas that will be used to create the border.



The offset for border-image-slice can be provided in terms of percentage or length units but percentages are highly recommended.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/scenery2.jpg);
        border-image-slice: 25%;
        padding: 15px;
        width: 50%
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        See how border is set for this div...
    &lt;/p&gt;&lt;/div&gt;&lt;p&gt; Here is full image for your reference: &lt;/p&gt;&lt;img src="/css/images/scenery2.jpg" height="160px"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Width



The border-image-width property is used to specify the width of the image to be set as a border.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-width: 5px;
        border-image-slice: 25%;
        padding: 5px;
        margin: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    border-image-width: 5px;
&lt;/div&gt;&lt;div style="border-image-width: 10px;"&gt;
    border-image-width: 10px;
&lt;/div&gt;&lt;div style="border-image-width: 15px;"&gt;
    border-image-width: 15px;
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Outset



The border-image-outset property is used to specify gap between element and border-image. This property pushes the border image outside, beyond the border box.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: grey;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-width: 10px;
        border-image-slice: 25%;
        border-image-outset: 0px;
        padding: 5px;
        width: 80%;
        margin: 10px 15px 60px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    border-image-outset: 0px;
&lt;/div&gt;&lt;div style="border-image-outset: 20px;"&gt;
    border-image-outset: 20px;
&lt;/div&gt;&lt;div style="border-image-outset: 25px;"&gt;
    border-image-outset: 25px;   
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Image Repeat



The border-image-repeat property in used to repeating and stretching nature of image around border. By default the border image gets stretched along the sides.



The value repeat for this property, repeats the image specified along the sides of the border until the whole length and width got filled.



It can also take the value as round, apart from stretch and repeat.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image-source: url(/css/images/border.png);
        border-image-slice: 25%;
        border-image-repeat: repeat;
        padding: 20px;
        width: 80%;
        margin: 10px 15px 60px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    Border Image Repeat
&lt;/div&gt;&lt;div style="border-image-repeat: stretch;"&gt;
    Border Image Stretch
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Border Image Shorthand Property



The border-image shorthand property allows you to set all the properties related to border images in one declaration.



border-image: image-source | image-slice | image-repeat;



Following example shows how to use this property.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: url('/css/images/border.png') 30 round;
        padding: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;
        This is an example of border shorthand property....
    &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Gradient as Border Images



CSS gradients can also be used to set the border of an element. There are three types of gradients supported: linear, radial and conic.



Following example shows how to use this property.



Example



<!DOCTYPE html><html><head><style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: linear-gradient(45deg, green, yellow) 1;
        padding: 20px;
        margin: 20px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;
    Border image linear gradient.
&lt;/div&gt;&lt;div style="border-image: radial-gradient(green, yellow) 1;"&gt;
    Border image radial gradient.
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS Border Images All Properties



All the properties related to border-images are listed in the table below:



Property Description Example
border-image A shorthand property for setting border image. Try It
border-image-outset Sets the image outset i.e how much the border image area extends beyond the border box. Try It
border-image-repeat Determines whether the border image should be repeated, rounded, spaced or stretched. Try It
border-image-source Sets the source/path of an image to be passed as a border to an element. Try It
border-image-slice Shows how to slice up an image in a border. Try It
border-image-width Sets the width of the image to be set as a border. Try It

Comments

Leave a Reply Cancel reply

More posts