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
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;
- 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
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
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):
-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*/
<div class="imageborder" style="width:50%;min-height:150px">
Content text here...
CSS: Same as above.
<img src="coconut.jpg" class="imageborder" />
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;
style="width:470px;height:300px;background:url(ocean_thumb.jpg) center center