CODEWITHSUNDEEP
google-chromecss
Mathias Nielsen
Mathias Nielsen

Reputation: 1620

border-image-outset doing its job or not?

I was just about to create a bug on the chromium issue tracker, but then I thought I would give it a try here first.

Try having a look at this site: http://www.norabrowndesign.com/css-experiments/border-image-frame.html

However it appears that chrome does support border-image-outset now or so I thought.

It responds to the command, but does not behave as I would expect. Is moves the images outward and thus creates more whitespace around the content instead of less. Reading the spec I am not sure if chrome is wrong in doing what it does, but it certainly seems the author of the linked site expected something else.

Further more, if the present behavior is correct then I cannot see what the purpose of it is. And the problem with the large border image, will have no solution at all.

So what is it, should I submit a bug or?

Upvotes: 3

Views: 540

Answers (1)

hsan
hsan

Reputation: 1559

I believe Chrome behaves as it should. border-image-outset is supposed to extend the border image area beyond the border box. It seems to do that in Chrome. Removing the whitespace around the content would require the opposite which can be achieved with the help of border-image-width.

border-image-width divides the border image area and is basically the counterpart to border-image-slice (which divides the border image). It's initial value is 1 (multiples of the corresponding computed border-width). So without assigning a border-image-width every slice would be resized to border-width.

See border-image-width at w3.org

To remove the whitespace around the content while keeping the size of the border image you would have to reduce border-width and set border-image-width to an appropriate value.

Try the following changes in the example from your question:

#one {
  border-width: 74px;
  border-image-width: auto;
}

Upvotes: 1

Related Questions