CSS border-image-outset Property

Description

The border-image-outset property specifies the amount by which the border image area extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

Initial value

0

Applies to

All elements

Inherited

No

Media

Visual

Computed value

Four values, each a number or <length> made absolute

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.borderImageOutset

Syntax

border-image-outset: [ <length> | <number> ]{1,4}

Values

• <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Negative numbers are not allowed.
• <number>Represents a multiple of the corresponding border-width. Negative values are not allowed for any of the 'border-image-outset' values.

Example

<div>Example of the border-image-outset property</div>

div {
   border: 1em solid blue;
   border-image-source: url("images/border.png");
   border-image-repeat: round;
   border-image-width: 27px;
   border-image-slice: 27;
   border-image-outset: 20px;
   height: 70px;
   padding: 20px;
   margin: 20px;
   width: 200px;
}

Browser Support

Desktop
11	12	15	15	15	6
Tablets / Mobile
4.4	18	15	14	6	1.0

Last updated by CSSPortal on: 12th October 2019