• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

• Free Graphics

• Image Optimizer
• FavIcon Generator
• Email Riddler
• htaccess Password
• .htaccess Banning
• Gradient Image Maker
• Button Maker
• Ribbon Rules
• DD Whois Service

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:

• url: The image that should be used as the border image.
• slicevalues: Up to four numbers that specify where the browser should slice the image:

  • The 1st value sets the offset of the first horizontal cut from the top of the image. For pixel units, do NOT include the "px" suffix.

  • The 2nd value sets the offset of the second vertical cut from the right edge of the image.

  • The 3rd value sets the offset of the third horizontal cut from the bottom of the image.

  • The 4th value sets the offset of the fourth vertical cut from the left edge of the image.

• stretch: How the slices should be oriented inside the element's border. Valid values are "stretch", "repeat", "round", or "space".

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:

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>