Re: [CSS3] border-radius, border-image and drawing order.

On Sat, Aug 15, 2009 at 2:33 PM, Andrew
Fedoniouk<news@terrainformatica.com> wrote:
> Consider following style and markup:
>
> div
>    {
>      width:100px; height:100px;
>      border-width:4px;
>      border-color:red;
>      border-radius:50%; /* that means border is a
>                            perfect circle */
>      border-style:solid;
>    }
>
> <div>Some text</div>
>
> Shall border be drawn on top of the text or behind it?
> That is the question.
>
> If border is a part of background as current spec implies
> then text should be drawn on top of the border.

Borders are drawn above the background, but under the text.

> But what about border-image?
> If it is drawn behind the content layer then
> this border-image makes almost no practical sense.

Border-image is drawn on the same layer as borders.  Borders are
hidden while a border-image is in effect.

Could you elaborate on why the border-image being drawn below text is
a problem?  Is this also a problem for normal borders?

> Why not to use that multi-background feature and
> to drop this border-image completely then?

One of the original reasons multiple-backgrounds were used *was* to do
essentially the same thing as border-image is currently doing.  It's
rather nasty when you actually start writing the code, though.  The
actual property can get *really* long and complex, you have to design
a single image and then slice it into multiple separate images, and it
can cause up to 9 network requests.  Border-image solves all of that
by letting you create a single image, specify how to slice it in the
CSS, and wrap it all up in a relatively simple syntax.

Another benefit of the current border-image proposal is that it allows
you to paint outside of the actual box geometry.  The benefits of this
are clearly explain with a great example over at Brad's site:
http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html

~TJ

Received on Saturday, 15 August 2009 19:46:10 UTC