Understanding the CSS 3 border-image property can be a little confusing especially as some of the values are not fully supported. The best way to learn something new is to roll your sleeves up and start experimenting. Experimenting with the shorthand property, border-image, produces many crazy, but also nice results. This article covers a small part of the many experimental graphics that I’ve tried out so far, maybe you will find them useful. Cheers!
Click on the thumbnails to view each example, sometimes there’s a small delay on loading, if they don’t come straight away, please wait a second:
These examples can be viewed in their own window. View the source of the example file to find the CSS code for all.
The border-image syntax
The border-image property is proposed to have five parts that can be used to set values for applying an image as a border. The properties include:
- border-image-source : none | image url
- border-image-slice : number (1 to 4 values), percentage (1 to 4 values), fill
- border-image-width : length (1 to 4 values), number (1 to 4 values), percentage (1 to 4 values), auto
- border-image-outset : length (1 to 4 values), number (1 to 4 values)
- border-image-repeat : stretch, round, repeat, space
Each of the parts that use 1-4 values are applied in the standard way of other shorthand properties: top, right, bottom, left.
The syntax is written:
border-image: source slice{1-4} / border-image-width{1-4} / border-image-outset{1-4} repeat
Default values: (border-image: none 100% 1 0 stretch)
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0
border-image-repeat: stretch
Inherited: no
Can be applied to: all HTML elements, except tables elements with border-collapse:collapse
Not all values are supported, at the moment, by all browsers. Try Firefox, Safari or Opera.
Find out more information about border-image in the article Create an Expandable Button Using CSS border-image
Create professional websites and online shops without programming:
