border-image-outset property CSS Reference



Definition and Usage

The border-image-outset property describes, by which amount the border image area extends beyond the border box.

  • Initial 0s
  • Applies to all elements, except internal table elements when border-collapse is collapse
  • Inherited no
  • Media visual
  • Computed Value all lengths made absolute, otherwise as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: [ <length> | <number> ]{1,4}
border-image-outset: sides                  /* One-value syntax   */  E.g. border-image-outset: 30%;
border-image-outset: vertical horizontal    /* Two-value syntax   */  E.g. border-image-outset: 10% 30%;
border-image-outset: top vertical bottom    /* Three-value syntax */  E.g. border-image-outset: 30px 30% 45px;
border-image-outset: top right bottom left  /* Four-value syntax  */  E.g. border-image-outset: 7px 12px 14px 5px;
border-image-repeat: inherit

Values

sides
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box in all four directions.
horizontal
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box in both horizontal directions, left and right.
vertical
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box in both vertical directions, top and bottom.
top
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box past its top edge.
bottom
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box past its bottom edge.
right
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box past its right edge.
left
Is a <length> or a <percentage> of the amount by which the border image area extends beyond the border box past its left edge.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples

No examples

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 15.0 15.0 (15.0) Not supported Not supported Not supported

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA 15.0 (15.0) Not supported NA NA

Relative articles