CSS Property border-image-outset

The space within that the border image is to be painted is named the border image area. By default, the boundaries of the border image space correspond to the boundaries of the element’s border box. However, the boundaries of the border image space may be extended exploitation the border-image-outset property.

The border-image-outset property is employed to specify the number by that the border image space is extended on the far side the element’s border box space. the number is mere as a group of showtime values that specify the number by that the border image space are dilated from the highest, right, bottom, and left edges.

The border-image-outset property will take four, three, two, or one showtime values.

When four values area unit mere, they set the outsets on the highest, right, bottom and left sides in this order. If 3 values area unit mere, the primary one specifies the highest showtime, the other specifies the correct and left outsets, and therefore the third one specifies the lowest showtime. If 2 values area unit mere, the primary one specifies the highest and bottom outsets, and therefore the other specifies the correct and left outsets. If one price is mere, it specifies all the four outsets.

Portions of the border image that area unit rendered outside the element’s border box don’t trigger scrolling, and don’t capture mouse events on behalf of the part. for instance, if you’ve set some event to require place once the part is hovered or clicked, that event won’t be discharged once the parts of the border image extending on the far side the border box area unit hovered or clicked.

Also, note that despite ne’er inflicting a scrolling mechanism, parts of the border image outside the border box may be clipped by associate relation of the part or by the viewport.

CSS Property border-image-outset Value

  • <length>
  • <number>

<length>

See the <length< entry for a list of possible values.

<number>

A <number< value represents multiples of the corresponding computed border-width of the element.

Desktop Browser Support

Mobile Browser Support

Examples

border-image-outset: 30px; /* one-value syntax, all outsets will be equal to 30px */
border-image-outset: 2 4; /* two-value syntax, top and bottom offsets = 2 * border-width, right and left offsets = 4 * border-width */
border-image-outset: 10px 20px 30px; /* three-value syntax */
border-image-outset: 4; /* border image outset is 4 times the width of the border specified using the boder-width property */
                

One comment

  1. It is appropriate time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions. Perhaps you could write next articles referring to this article. I wish to read even more things about it!

Leave a Reply