- Home / CSS3 Previews / Border-image: using images for your border
Border-image: using images for your border
Another exciting new border feature of CSS3 is the property border-image
. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image
and border-corner-image
. These two values are shorthands for:
border-image
:border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image
:border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:
border-image: url(border.png) 27 27 27 27 round round;
Which results in:
Lorem ipsum dolor sit amet.
Or:
border-image: url(border.png) 27 27 27 27 stretch stretch;
Which then results in:
Lorem ipsum dolor sit amet.
For those of you not so lucky as to be able to see this, here are screenshots of the two examples.
Number one:
Number two:
TAG CLOUD
acid3
advanced layout
advanced layout module
Animations
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows