Home

CSS3 Border Image Tutorial

Border Image Tutorial

Here is a preview of one of the many things that CSS3 can do.

It will allow you to add a border around any div or class on a webpage.  You can also round the corners, repeat the image, or stretch the image border.

Here is a link to a preview of what we will be working on.

 

Step 1: Create a basic html page with some text in it.

 

<body>
<div>
 
<p class="moz">Here is the test border using <strong>moz</strong>.</p>
 
<p class="webkit">Here is the test border using <strong>webkit</strong>.</p>
 
<p class="moz_stretch">Here is the test border using <strong>moz</strong>, with a stretched image.</p>
 
<p class="webkit_stretch">Here is the test border using <strong>webkit</strong>, with a stretched image.</p>
 
</div>
</body>
 
 

 

 

Step 2: Link the html tags to the CSS.

 

<style type="text/css">
 
.moz {
-moz-border-image: url(borderFence.png) 45 45 45 45 round round;
border:2em double;
padding:14px;
width:350px;
}
 
 
.webkit {
-webkit-border-image: url(borderFence.png) 45 45 45 45 round round;
border:2em double;
padding:14px;
width:350px;
}
 
.moz_stretch {
-moz-border-image: url(borderFence.png) 45 45 45 45 stretch stretch;
border:2em double;
padding:14px;
width:350px;
}
 
 
.webkit_stretch {
-webkit-border-image: url(borderFence.png) 45 45 45 45 stretch stretch;
border:2em double;
padding:14px;
width:350px;
}
 
 
</style>

 

Step 3:  Test the site in multiple browsers.

Notice how each browser differs in appearance with the certain types of image bordering.  IE 8 currently doesn't support any of the border-image css attributes.

Cross Broswer CSS3 Testing

Here is the entire source code:

 

<title>CSS3 Testing...</title>
<head>
 
<style type="text/css">
.moz {
-moz-border-image: url(borderFence.png) 45 45 45 45 round round;
border:2em double;
padding:14px;
width:350px;
}
 
 
.webkit {
-webkit-border-image: url(borderFence.png) 45 45 45 45 round round;
border:2em double;
padding:14px;
width:350px;
}
 
.moz_stretch {
-moz-border-image: url(borderFence.png) 45 45 45 45 stretch stretch;
border:2em double;
padding:14px;
width:350px;
}
 
 
.webkit_stretch {
-webkit-border-image: url(borderFence.png) 45 45 45 45 stretch stretch;
border:2em double;
padding:14px;
width:350px;
}
 
 
 
</style>
 
</head>
 
 
 
<body>
<div>
 
<p class="moz">Here is the test border using <strong>moz</strong>.</p>
 
<p class="webkit">Here is the test border using <strong>webkit</strong>.</p>
 
<p class="moz_stretch">Here is the test border using <strong>moz</strong>, with a stretched image.</p>
 
<p class="webkit_stretch">Here is the test border using <strong>webkit</strong>, with a stretched image.</p>
 
</div>
</body>
 
</html>