CSS Border Images

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Border Images

border-image Property

The CSS border-image property specifies an image to be used instead of the normal border around an element.

The property consists of three parts:

  • The image to be used as the border.
  • Where to slice the image.
  • Specify whether the middle sections be repeated or stretched.

The border-image property uses the image and slices it into nine sections, like a tic-tac-toe board. Then, the corners are placed at the corners, and the middle sections are repeated or stretched as you specify.

HTML
				
					<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
CSS
				
					#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Output

border image