Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML
CSS Home

CSS Tutorial

Introduction
CSS Advantages
CSS Syntax
Implementing CSS
CSS Class
CSS ID
CSS Font
CSS Text
CSS Background Code
CSS Border
CSS Margin
CSS Padding
CSS Lists
CSS Height & Width
CSS Positioning
CSS Float
CSS Layers
CSS Summary

CSS Codes

CSS Align
CSS bgcolor
CSS Cellpadding
CSS Cellspacing
CSS Floating Menu
CSS Hyperlinks
CSS Leading
Inline Style Sheets
Embedded Style Sheets
External Style Sheets
CSS Scrollbars
CSS Table Width
CSS Print Version
CSS Table-layout

CSS Examples

CSS Examples
CSS Table-layout Example

CSS Reference

CSS Mini Tutorial
CSS Properties
CSS Color Codes
CSS Template
CSS Media Types
IMCreator - Free Website Builder

CSS border-image

The border-image property is one of the properties introduced in CSS3 for the purposes of enabling images to be used on CSS borders.

The CSS border-image property is a shorthand property for setting multiple "border image" related properties in one place. In other words, the border-image property is an efficient way of adding images to your borders.

The border-image property sets the border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.

Note that setting an image border will override any border that has been specified using the border-style properties. However, if the image cannot be loaded, or if the border-image value is none, the border styles will be used instead.

The examples on this page include browser-specific properties that start with extensions such as -webkit-, -moz-, etc. This is for browser compatibility reasons. See the bottom of this article for more on this.

Syntax: border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>
Example 
-webkit-border-image: url(/pix/css/css3/properties/border-image-1.png) 30 30 round; /* Safari and Chrome */
-moz-border-image: url(/pix/css/css3/properties/border-image-1.png) 30 30 round; /* Firefox */
-ms-border-image: url(/pix/css/css3/properties/border-image-1.png) 30 30 round; /* Internet Explorer */
-o-border-image: url(/pix/css/css3/properties/border-image-1.png) 30 30 round; /* Opera */
border-image: url(/pix/css/css3/properties/border-image-1.png) 30 30 round; /* CSS3 */
Note that this example includes various CSS extensions in addition to the W3C CSS3 property. This is for browser compatibility.
Try it yourself!


Possible Values:
<'border-image-source'>
Specifies the location of the image. For more information, see the border-image-source property.
<'border-image-slice'>
Specifies inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle. For more information, see the border-image-slice property.
<'border-image-width'>
Specifies the width of the border image. This defines the border image area, which is the area used to draw the image. For more information, see the border-image-width property.
<'border-image-outset'>
Specifies the amount by which the border image area extends beyond the border box. For more information, see the border-image-outset property.
<'border-image-repeat'>
Specifies how the images for the middle part and sides of the border are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first. Values have the following meanings:
'stretch'
The image is stretched to fill the area.
'repeat'
The image is repeated (i.e. "tiled") to fill the area.
'round'
The image is repeated (tiled) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.
'space'
The image is repeated (tiled) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
For more information, see the border-image-repeat property.
Initial Value: See individual properties
Applies to: See individual properties
Inherited: No
Media: Visual

Browser Compatibility

At the time of writing, CSS3 was still under development and browser support for many CSS3 properties was limited or non-existent. For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari and Google Chrome, -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

Be aware that if you choose to use the proprietary CSS extensions in a live environment, your code will not pass any W3C CSS validation, as the browser-specific properties are not valid W3C properties.

Many of the CSS3 examples on this website include these browser specific properties. If they weren't included, most of the examples wouldn't work for most users (at least, not until possibly years after the article was written).

The major browser manufacturers are working to support the W3C properties, and eventually, you will be able to omit these browser-specific properties.

Enjoy this page?

  2. Link to this page (copy/paste into your own website or blog):
  3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!