Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: DIVs and containers: CSS3 demos: Here

Image frames using CSS3 border-image

Author: Dynamic Drive

CSS3 makes it possible to specify an image as an element's border, instead of just a solid color. While on the surface this doesn't seem particularly interesting, the way the property works makes it more than that which meets the eye. The border-image property lets you specify a single image for the purpose and then slices that image to create the desired border effect. Yes, CSS is slicing now. border-image is currently supported in all the modern browsers to various degrees except IE (as of IE9). The shorthand syntax is:

border-image: url(image.png) 25 40 12 10 stretch;

Where:

For slicevalues, if only one number is defined, the same value will be used for all 4 cuts. If 2 numbers are defined, the first is used for the top and bottom cuts, and the second the left and right cuts. Regardless, 4 cuts are made to the image in total, and the browser ends up with 9 slices that it uses to put together the border image of an element. Each slice is used to fill the corresponding edges of the element's border, with the center slice covering the element itself (and should be made transparent in most cases).

This post isn't about a detailed description of border-image- that will have to be for another post. For this post, what I want to demonstrate is how to use this property to easily add image frames to containers on your page. First, create the image you'd like to use as the frame; here I've whipped up 2 simple frames to illustrate the technique:

 

Note that both images above have a transparent inside so the content they are framing can show through.

Now, to the heart of the matter- to add an image border to an element, define the border-image property with slicevalues that cut up the image as desired. Also define a border-width property echoing those values. Enough talk, to some examples now! Note that the below examples do not work in IE (as of IE9):

Example 1:

Found across much of the tropics, the coconut is known for its great versatility as seen in the many domestic, commercial, and industrial uses of its different parts. Coconuts are part of the daily diet of many people. Its endosperm is known as the edible "flesh" of the coconut; when dried it is called copra. The oil and milk derived from it are commonly used in cooking and frying; coconut oil is also widely used in soaps and cosmetics. The clear liquid coconut water within is a refreshing drink and can be processed to create alcohol. The husks and leaves can be used as material to make a variety of products for furnishing and decorating. It also has cultural and religious significance in many societies that use it. -Wikipedia

CSS:

.imageborder{
border-width: 20px;
-moz-border-image: url(frame.gif) 20 stretch; /*Mozilla version*/
-webkit-border-image: url(frame.gif) 20 stretch; /*Webkit version*/
-o-border-image: url(frame.gif) 20 stretch; /*Opera version*/
-ms-border-image: url(frame.gif) 20 stretch; /*IE syntax when it does support this prop*/
border-image: url(frame.gif) 20 stretch; /*Standard version*/
}

Markup:

<div class="imageborder" style="width:50%;min-height:150px">
Content text here...
</div>

Example 2:

CSS: Same as above.

Markup:

<img src="coconut.jpg" class="imageborder" />

Example 3:

CSS:

.imageborder2{
border-width: 25px 30px;
-moz-border-image: url(frame2.png) 25 30 stretch;
-webkit-border-image: url(frame2.png) 25 30 stretch;
-o-border-image: url(frame2.png) 25 30 stretch;
-ms-border-image: url(frame2.png) 25 30 stretch;
border-image: url(frame2.png) 25 30 stretch;
}.

Markup:

<div class="imageborder2" style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center no-repeat">
</div>

Code Info

Rate this code:

Date Posted: 07/08/2011

Revision History: None

Usage Terms: Click here

Your Comments (5)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

These are awesome border image. I like all of these specially example-3. Thanks for the post.
Posted by Mark waugh on 07/13, 05:18 AM
The borders look so good. Thanks to CSS3 we do not need Photoshop for little design things.
Posted by asigurari locuinte on 07/20, 08:25 AM
Are there any boarder styles aside from those? More on unisex. It'll be more preferable. Thank you for the review. Reliable.
Posted by Terry Fisherman on 07/26, 08:51 AM
I like the most example number 2.
Posted by Andy Smith on 07/27, 06:46 AM
dynamic library rocks!!!! great website for those who want to create their website by own!!!!
Posted by bibek shrestha on 07/29, 11:54 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.