border-image in Firefox 3.1 - CSS 3

John Resig posted about the upcoming improvements in Firefox 3.1 CSS support. One areas that have received solid implementations is that of border-image. This is a new CSS 3 module that makes the exact slicing of images (and their positioning around an element) quite easy. Now you can create the iPhone search button that iUI contains, using the […]

Share online:

John Resig posted about the upcoming improvements in Firefox 3.1 CSS support. One areas that have received solid implementations is that of border-image. This is a new CSS 3 module that makes the exact slicing of images (and their positioning around an element) quite easy. Now you can create the iPhone search button that iUI contains, using the simple CSS:

border-width: 0 5 0 5;
-webkit-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;

Here you see the reusable button from the iui library (slightly tweaked to support both WebKit's and Mozilla's implementations of border-image).

More info....

Source:→ Ajaxian

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.