Images can be assigned to borders based on a single image file. The border property must be set.
Compatibility
-webkit-border-image iOS 3.2+ Android 2.1+ Blackberry 7+
border-image Firefox 4+ Safari 6+, Chrome 15+ Opera 11+
Not supported by Internet Explorer, Opera Mini and IE Mobile. For detailed compatibility info see caniuse.com. For a better understanding of the admittedly difficult syntax see border-image.com.
Firefox 15+Safari 6+, Chrome 15+Opera 15+
iOS 3.2+Android 2.1+Blackberry 7+
General description
border-image: 1 url(image.png) 2 3 / 3 5px 4 round
- The path to the background image file.
- Sets the size of the areas that are taken to draw border. Can consist of up to four values each representing one side of the border. General shorthand rule applys.
- (Optional, separated by a slash) Border width. Can be different from value 2 and the border-width property set. General shorthand rule applys.
- (Optional, separated by a slash) Specifies how the image is fitted to the four sides of the border. Possible values are: stretch (default), round and repeat (see examples). If one value is set it is taken for all four sides of the border, with two value the first applys to top/bottom and the second to left/right. This value has no effect on the corners.
Examples
Tiled border image with matrix applied
border-image: url(image.png) 1 9 2 round
- The area taken for all the four sides is 9 pixels high/wide
- The background image is tiled and fitted (round).
Border image with matrix applied and two sides stretched
border-image: url(image.png) 1 7 2 15 3 round stretch
- The top and bottom parts of the background image are 7 pixels high.
- The left and right parts are 15 pixels wide.
- The top/bottom areas of the border image are tiled and fitted (round), the left/right areas are stretched to the whole height (stretch).
Further reading
For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).
border-radius
Is used to round the corners of an element that has the border or background property set.
Compatibility
border-radius Firefox 4+ Safari 5+, Chrome 10+ Internet Explorer 9+ Opera 11+ iOS 4+ Android 2.2+ Blackberry 7+ IE Mobile 10+
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Not supported by Opera Mini. For detailed compatibility info see caniuse.com.
Firefox 4+Safari 5+, Chrome 10+Internet Explorer 9+Opera 11+
iOS 4+Android 2.2+Blackberry 7+IE Mobile 10+
General description
border-radius: 1 8px / 2 13px
- The radius of the quarter circles that form the shapes of the corners.
- (Optional, separated by a slash) The vertical radius, which results in a quarter ellipse when different from the horizontal radius.
Examples
Four values given
border-radius: 1 8px 2 13px 3 10px 4 5px
1 Top left corner. 2 Top right corner. 3 Bottom right corner. 4 Bottom left corner.
Three values given
border-radius: 1 8px 2 13px 3 5px
1 Top left corner. 2 Top right AND bottom left corner. 3 Bottom right corner.
Two values given
border-radius: 1 8px 2 13px
1 Top left AND bottom right corner. 2 Top right AND bottom left corner.
One value given
border-radius: 1 8px
1 All four corners rounded equally.
Elliptical corners, two values given
With the addition of a slash it is possible to set the horizontal and vertical radii separately.
border-radius: 1 8px / 2 13px
1 All horizontal radii set equally. 2 All vertical radii set equally.
Elliptical corners, four values given
Three and four values on each side of the slash follow the notation given above (without slash).
border-radius: 1 8px 2 13px / 3 10px 4 5px
- Horizontal radii for top left AND bottom right corners.
- Horizontal radii for top right AND bottom left corners.
- Vertical radii for top left AND bottom right corners.
- Vertical radii for top right AND bottom left corners.
Further reading
For more info see the W3C site, the Safari site, the MSDN site and the site at MDN (including compatibility info for older browser versions).