CODEWITHSUNDEEP
bordercssborder-box
Y.L.
Y.L.

Reputation: 1314

What's the "border image area"?

I am a newbie of CSS3, and recently I am learning the border-image attributes, when I read the W3C documents: http://dev.w3.org/csswg/css-backgrounds/#border-image-width

I found the following lines:

The border image is drawn inside an area called the border image area. This is an area whose boundaries by default correspond to the border box, see ‘border-image-outset’.

so, what exactly the "border image area" and "border-box" mean? and what's the effects of border-image-width and border-image-outset? I think the W3C documents don't explain it very clearly.

thanks in advance!

Upvotes: 3

Views: 136

Answers (2)

BoltClock
BoltClock

Reputation: 723598

The border box is defined as everything within the outer perimeter of the borders of a box, including the borders themselves, if any. This definition is given in this section of CSS2.1. If there are no borders, then it's the perimeter of the padding box (or, if there's no padding either, then the content box). The border image area is defined as the entire area of the border box, including the padding and content.

So if you have a box with a border width of 30px, then the border image fits into the 30 pixels surrounding the box by default. When you specify a value for border-image-outset, the image is rendered that set distance away from the border area, making it appear further away from the padding/content edge.

Note that border-image-outset by itself does not stretch the border image; it only shifts the border image area a set distance away from the border area. If you want to stretch the image as well, combine border-image-outset with border-image-width.

Upvotes: 3

James Korden
James Korden

Reputation: 634

My understanding of them isn't perfect, but, from use I have found that:

The border image area is the area surrounding your content. If you set a 1px border, then it's 1px. If you use an image of say, 90 pixels in height for a border, and the border is 30px, like so...

XoX
o o
XoX

So X is the corner, o is a side. Anything in this area is the border box.

Upvotes: 1

Related Questions