CSS3 Tutorial: border-image

Border met achtergrond Image

Using the next CSS3 rules we can create a border with a background image:

border-image

Syntax:   <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
/*For example
-webkit-border-image: url(border-image.png) 25% repeat;
-moz-border-image: url(border-image.png) 25% repeat;
border-image: url(border-image.png) 25% repeat;

Browser support

Example1: simple element box with image border.

Before we give the HTML code and the CSS3 rules for creating an element box with an image border, we will first inspect the image with 100 x 100 px which we will as place as a background in the border. Check image 1 and 2, and take notice of the dimensions of the edges (which we will be using as the border). In image 3, where a screenshot of the browser window with the end result is displayed, pay special attention of the position of the letters A,B,C and D as well as to the numbers 1,2,3 and 4.

 

de border image
Image 1. The border image.

 

de border image met afmetingen
Image 2. The border image with border dimensions.

The HTML code

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Image borders met CSS3</title>
<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="border-image_test1">
	<h4>My My, what a nice image border have I !!</h4>
</div>
</body>
</html>

The CSS

/* Border with background Image */
div#border-image_test1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	width: 300px;
	height: 100px;
	-webkit-border-image: url("images/border-image1.png") 25 30 15 20 repeat stretch;
	-moz-border-image: url("images/border-image1.png") 25 30 15 20 repeat stretch;
	border-image: url("images/border-image1.png") 25 30 15 20 repeat stretch;
	text-align: center;
	color: #FFF;
	padding: 20px;
	border-top: 25px solid white;
	border-bottom: 15px solid white;
	border-right: 30px solid white;
	border-left: 20px solid white;
	background-color:#c75600;
}
Element box with border image
Image 3. Element box with border-image.

Check this example in your browser

How does it work?

The way border-image operates is... rather strange, to say the least. Therefore we will inspect this subject a bit more accurately compared to other subjects. What we see is:

  • the angles of the image are displayed in the corresponding angles of the element box;
  • de numbers 25 30 15 20 in the CSS rules are the so called 'slice parameters'. Ensure that you omit the px unit or else, strangely enough, the whole thing won't work. De numbers represent the amount of pixels that is being cut off from the top, right, bottom and left border. You might also use percentages, which in our case (because the dimensions of our image are 100 x 100) means 25% 30% 15% and 20% . Pay attention that, when using percentages, you need to place the unit %.
  • the border area between the edges is either repeated (repeat) of stretched (stretch). In our example the top and bottom are both stretched, while the left and right are repeated. In image 3 we observe indeed that the 2 en 4 are repeated while the 1 and 3 are stretched.
  • the middle area (content area) stretches both horizontally as vertically.

Example2: Element box with image-border

The border image

de border image

The HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Image borders with CSS3</title>
<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="border-image_test1a">
	<h4>My My, what a nice image border have I !!</h4>
</div>
</body>
</html>

The CSS

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 18, 2011 */
@font-face {
    font-family: 'DesyrelRegular';
    src: url('../fonts/desyrel/desyrel-webfont.eot');
    src: url('../fonts/desyrel/desyrel-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/desyrel/desyrel-webfont.woff') format('woff'),
         url('../fonts/desyrel/desyrel-webfont.ttf') format('truetype'),
         url('../fonts/desyrel/desyrel-webfont.svg#DesyrelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Border with background image */
div#border-image_test1a {
    font-family: 'DesyrelRegular',Verdana, Geneva;
    font-size: 18px;
    width: 330px;
    height: 100px;
    border: 15px solid white;
    -webkit-border-image: url("images/border-image1a.png") 5 5 5 5 stretch;
    -moz-border-image: url("images/border-image1a.png") 5 5 5 5 stretch;
    border-image: url("images/border-image1a.png") 5 5 5 5 stretch;
    text-align: center;
    color: #FFF;
    padding: 20px;
    background-color: #000;
}
Element box with border image
Image 4. Element box with border image.

Check this example in your browser

Leave a comment