...

Web Technologies - CSS3

Back to Course

Lesson Description


Lession - #518 CSS3 Border Images

With the CSS3 border-image property, you'll set a picture to be used because the border around an element.

The property has 3 parts:
  1. The image to use as the border
  2. Where to slice the image
  3. Define whether the middle sections should be repeated or stretched


The border-image property takes the image and slices it into 9 sections, sort of a tit-tat-toe board. It then places the corners at the corners, and also the middle sections ar repeated or stretched as you specify.

Example



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



<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png>
 30 stretch;</p>


Try it here

CSS3 Rounded Corners CSS3 Multi Background