Border Image - Create image borders in CSS

CSS Border Image is adding images that appear on the border for elements. You don't need to use any HTML code to call the Border Image.

The border-image attribute in CSS

The border-image attribute in CSS allows you to specify an image that will use the regular border replacement around an element.

Attributes are worth following:

  1. The image is used as a border
  2. Where to crop pictures
  3. Identify parts that are repeated or prolonged.

In this article, TipsMake.com will use the following image named " Border-image.png ":

Border Image - Create image borders in CSS Picture 1

The border-image attribute cuts the image into nine style sections like the checkerboard flag as follows:

Border Image - Create image borders in CSS Picture 2

Now notice the sections 1, 3, 7, 9 are four corners and it is fixed, part 5 is the central position and the rest will be affected by values ​​like round, repeat or stretch only determined.

Example 1: The middle part of the image is repeated to create a border:

 #borderimg { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 round;
}

Border Image - Create image borders in CSS Picture 3

In this example, the middle part of the image is repeated to form a border.

Note : Internet Explorer 10 and earlier versions do not support the border-image attribute.

The border-image attribute in CSS

In this example, the middle part of the image is repeated to form a line
rim:

border-image: url (border-image.png) 30 round;

Original image:

Note: Internet Explorer 10 and older versions do not
Support border-image attribute.

Example 2: The middle part of the image is stretched to create a border.

 #borderimg { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30 stretch;
}

Border Image - Create image borders in CSS Picture 4

In this example, the middle part of the image is stretched to form a border.

The border-image attribute in CSS

In this example, the middle part of the image is stretched to form a line
rim:

border-image:
url (border-image.png) 30 stretch;

Original image:

Note: Internet Explorer 10 and older versions do not
Support border-image attribute.

Cut the Border Image to create a new border

The way to slice images to make different borders will create a lot of novelty, completely change the look of the border.

Type 1 slice:

 #borderimg1 { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 50 round;
}

Border Image - Create image borders in CSS Picture 5

Type 2 slice:

 #borderimg2 { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 20% round;
}

Border Image - Create image borders in CSS Picture 6

Type 3 slice:

 #borderimg3 { 
border: 10px solid transparent;
padding: 15px;
border-image: url(border-image.png) 30% round;
}

Border Image - Create image borders in CSS Picture 7

The border-image attribute in CSS

border-image: url (border-image.png) 50 round;

border-image: url (border-image.png) 20% round;

border-image: url (border-image.png) 30% round;

Note: Internet Explorer 10 and older versions do not
Support border-image attribute.

3.9 ★ | 16 Vote

May be interested

  • Multiple Background in CSSPhoto of Multiple Background in CSS
    multiple background is an advanced property to handle background in css.
  • Colors in CSSPhoto of Colors in CSS
    in css, colors are indicated by predefined color names or values ​​for rgb, hex, hsl, rgba and hsla.
  • Background in CSSPhoto of Background in CSS
    css background properties are used to define background effects for elements.
  • Border in CSSPhoto of Border in CSS
    the border feature in css allows to define the style, width and color for the border of an element.
  • Margin - The margin in CSSPhoto of Margin - The margin in CSS
    the margin feature in css is used to create spaces around the element, outside the borders. these properties will set the edge of each element (top, bottom, left, right).
  • Padding in CSSPhoto of Padding in CSS
    the css padding feature is used to create space around the content of the element and within the borders in css.