Wednesday, August 13th, 2008

border-image: No more cutting up hell

Category: Browsers, CSS

Remember when you wanted a growable area with rounded-goodness and you had to cut up the image into a million pieces to have the top corners and the sides? Since then we have gotten nice effects to help us, and John Resig just posted on how Firefox 3.1 will implement what WebKit already has in the border-image CSS 3 magic:

Now you can create the iPhone search button that iUI contains, using the simple CSS:

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

Here you see the reusable button on the left, that will stretch and become the button on the right:

Next up, rounding the borders themselves in all browsers (border-radius!)

Posted by Dion Almaer at 11:21 am

4.3 rating from 37 votes


Comments feed TrackBack URI

How is this “CSS3” when the properties are mox and webkit specific?

Comment by commadelimited — August 13, 2008

Errr “moz”

Comment by commadelimited — August 13, 2008

@commadelimited: It’s part of the current CSS3 Background and Borders working draft. When the draft reaches status of Recommendation, the browser-specific prefixes can be dropped.

Comment by zzen — August 13, 2008

Hmm.. Seems to also stretch the colors lighter. Likely by a function of the stretch width, this will make all buttons with the same img but diff widths look inconsistent. Let’s hope I’m missing something or that they get that fixed.

Comment by creppie — August 13, 2008

Nice thing about targeting iPhone (as it appears the example does) is that it is a single platform. No worry about different browsers (though, you do have to worry about the difference between 1.0 and 2.0 software (though x2, 2.0 software, and future software updates, may become ubiquitous rather quickly due to Apple’s method of propagation)).

Comment by ialexi — August 13, 2008

Very nice but this highlights a problem with the naming of non standard properties.

Firefox should simply recognize the -webkit-border-image one instead of forcing us to add another line to our css files for -moz-border-image.

In other words: the first browser to implement a property should get credit and give it the name it wishes. The other browser should use it and eventually drop the browser specific name when the property gets approved.

What I don’t want to see is css files like this

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

It’s verbose, it’s redundant, it’s error prone: it’s a bad practice.

Comment by pmontrasio — August 13, 2008

Why can’t both just support something like -css3-border-image instead of making us type out the individual rendering engine? I understand theres some places where there might be overlap, but the webkit and mozilla teams should collaberate to eliminate those.

Comment by tj111 — August 13, 2008

There’s a reason for it. -vendor- are necessary because the draft versions might not behave like the final version and specifically might not even behave the same in different browsers. And we all want to avoid something like we have in HTML were we have totally different properties (i.e. -msie-width vs width) that have the same name.

Comment by Hans Schmucker — August 13, 2008

The reason for the -vendor- prefix, as Hans Schmucker sort of explained, is that it is a vendor-specific implementation even if it conforms to the draft, until the spec is out of draft. If FF 3.1 implements this as it is described in the draft, and the draft is edited and made official tomorrow, then 3.1 has a non-standard implementation until it is updated to the new spec and takes 3.1’s market share.

Comment by eyelidlessness — August 13, 2008

As a matter of fact, webkit and firefox implementations of border-radius are different. There are some (obscure) combinations of parameters that are interpreted differently.

Comment by icoloma — August 14, 2008

border-width does not take integer values, fwiw. (With a no-quirks parser that rule would be ignored.)

Comment by Anne van Kesteren — August 18, 2008

Leave a comment

You must be logged in to post a comment.