Border-image-outset - CSS Property

Syntax diagram of border-image-outset.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

• length is a positive or zero number followed by one of CSS dimension units.
  
• number is a positive number without a unit.
• These syntaxes can be repeated from 1 to 4 times.

Description of the border-image-outset property.

border-image-outset sets an offset of the image-border outward from the element. It accepts one to four values:

• If only one value is given, it applies to all four sides.
• If two values are specified, the first one sets the overflow for the top and bottom borders; the second one for the left and right borders.
• If three values are given, the first sets the overflow for the top border, the second for the left and right sides, and the last one for the bottom border.
• Finally, when the four values are given, they correspond respectively to the overflow on the top, right, bottom, and left sides.

In the example below, the image border has been shifted 20 pixels outward from the element. The background color highlights the edges of the element.

Warning! Shifting the border doesn't change the element's dimensions, and therefore doesn't cause a shift in the elements that follow. So the image border could end up colliding with other elements.

On the other hand, and for the same reason that the element is not enlarged, mouse events that occur on the border, outside the element's normal surface, will not be handled. If the border is heavily offset, this can be confusing for the user. By moving the mouse over the example below, you can see the cursor change shape. This indicates the area that is clickable. You can see that it doesn't extend all the way to the border.
 

Other properties related to image borders.

Values for border-image-outset.

• border-image-outset: 10px;

  A positive or zero value, with its unit of dimension (see CSS dimension units). The default value is 0 without unit. The border image will be offset by the indicated value, outward from the element.

  Negative values are not allowed, so you can't make the border go inside the element.

• border-image-outset: 2;

  A positive or zero value, without units. This value is a multiple of the border width (border-width).

• border-image-outset: 2 10 15;

  From one to four values can follow each other, separated by spaces.

  • If only one value is present, it applies to all sides of the element.
  • If two values are present, the first applies to the top and bottom sides, the second to the left and right sides.
  • If three values are set, the first applies to the top side, the second to the left and right sides, and the third to the bottom side.
  • Finally, if four values are set, they apply in order to the top, right, bottom, and left sides.

  In this syntax, it's possible to mix values with units and values without units.

  
• border-image-outset: initial; (0) border-image-outset: inherit; border-image-outset: revert; border-image-outset: revert-layer; border-image-outset: revert-rule; border-image-outset: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the border-image-outset property.

The property border-image-outset can be animated to give a 'breathing' effect, without affecting the other elements on the page.

Watch out! There's a little trap in writing the @keyframes directive. Since border-image-outset accepts numbers both with and without units, you need to make sure that the from and to clauses are expressed in the same unit. This is especially tricky with the value 0, which normally can be written without a unit without any problem. But here, the following code won't produce a smooth animation from 0 to 20 pixels.

Access the border-image-outset property via a program

With Javascript, change the value of border-image-outset.

In JavaScript, it's possible to change the value of border-image-outset using two syntaxes. The first one uses the typical CSS notation, in kebab-case, and another syntax uses a camel-case notation, which is more common in JavaScript.

let el = document.getElementById('id'); el.style['border-image-outset'] = '10px'; // or let el = document.getElementById('id'); el.style.borderImageOutset = '10px';

With Javascript, read the value of border-image-outset.

This code works when the property has been applied directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['border-image-outset']; // or let el = document.getElementById('id'); let value = el.style.borderImageOutset;

With Javascript, read the computed value of border-image-outset.

The computed value is the one that comes from evaluating the relative units and taking into account any inherited values. If the property border-image-outset hasn't been set, the computed value will be the initial value (0), but in any case, it is defined.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-image-outset');

With JQuery, read or change the value of border-image-outset.

JQuery also offers specific syntaxes for handling CSS properties.


// Read the value:
$('#id').prop('border-image-outset');
// Write the value:
$('#id').prop('border-image-outset', '10px');
$('#id').prop('{border-image-outset': '10px'});


With JQuery, read the computed value of border-image-outset.

let value = $('#id').css('border-image-outset');

Other code examples.

Other examples of Javascript and JQuery code are given on the page Javascript and CSS.

Test it yourself.

The buttons below apply the entered value to the border-image-outset property and then show either the value as it was applied or the computed value. This second option lets you see how the value of border-image-outset is stored (serialized). In particular, you'll notice that all units are converted to pixels except for numbers without a unit, which stay the same.

Simulator.

Browsers compatibility with border-image-outset.

The property border-image-outset as well as all properties related to border images are properly supported by current browsers.

Notes:

(1) Supports the summary property but not detailed properties.
Doesn't support the space and round values

1

Using images
for borders

2

border-image-outset
property

Estimated overall support.

97%

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the border-image-outset property.

• CSS Backgrounds and Borders Module Level 3

  Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
  Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.

  Regarding border-image-outset First definition of the border-image-outset property with the introduction of image-borders.
  

  August 02, 2002

  Working Draft.

  

  December 17, 2009

  Candidate Recommendation.

  

  

See also: other border and background features.

The properties related to borders and backgrounds are described in the W3C specification called CSS Backgrounds and Borders Module. Here is the list:

Properties: