Skip to main content

CSS property border-image-outset

Page Title

The border-image-outset property in CSS defines the extent to which an element's border-image extends beyond its border-box, creating a space between the element's border-image area and the edge of its border.


.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-width: 40%; 
  border-image-repeat: repeat;
  border-image-outset: 2;
}

See the Pen Untitled by Mushtaq Ahmad (@MushtaqPhysicist) on CodePen.

The CSS border-image-outset property, also known as the "Edge Overhang" property, is specified in the CSS Backgrounds and Borders Module Level 3. Its purpose is to enable the border image area to extend beyond an element's border-box, which is accurately described by the term "Edge Overhang".

Syntax 


 		border-image-outset: [<length [0,∞]> | <number [0,∞]>]{1,4}
  1. Initial value: 0
  2. Applies to: all elements (including the ::first-letter pseudo-element), except internal table elements when border-collapse is set to collapse.
  3. Inherited: no
  4. Percentages: n/a
  5. Computed value: four values, each a number or absolute length
  6. Animation type: by computed value

Similar to the shorthand properties for margin and padding, the CSS border-image-outset property can take between one and four values:

  1. One value: Sets all four sides at the same outset distance.
  2. Two values: The first value sets the outset for the top and bottom sides; the second value sets the outset for the left and right sides.
  3. Three values: The first value sets the outset for the top side; the second value sets the outset for the right and left sides; the third sets the outset for the bottom side.
  4. Four values: Sets the outset for each side in clockwise order, starting from the top side (top, right, bottom, and left, in that order). n/a

Values 


/* Length value (includes unit) */
border-image-outset: 2rem;

/* Number value (unitless) */
border-image-outset: 2;

/* Single value: Sets all four sides */
border-image-outset: 2;
border-image-outset: 2rem;
border-image-outset: 32px;

/* Two values: top and bottom | left and right */
border-image-outset: 4 6rem;
border-image-outset: 2 3rem;
border-image-outset: 1 24px;

/* Three values: top | left and right | bottom */
border-image-outset: 4rem 2 5rem;
border-image-outset: 5 8rem 10rem;
border-image-outset: 3 6 9;

/* Four values: top | right | bottom | left */
border-image-outset: 15 4rem 4 10rem;
border-image-outset: 2 5 13rem 4;
border-image-outset: 2 5 3 7rem;

/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

<length [0,∞]>

In CSS, a length is a numerical value with a unit of measurement such as pixels (px), rems (rem), percentages (%), viewport height (vh), etc. These values can be used with the border-image-outset property to specify the height and width dimensions of the image's outset. Examples of length values include 10px, 1.35rem, 50%, 25vh, and so on.

 
    .container{
  /* Sets dimensions on all four sides */
  border-image-outset: 2rem;
}

In the above example, the border-image-outset property is set to a value of 2rem for the top, right, bottom, and left outsets of the border. This means that the outset for each side of the border will be 2rem in length.

See the Pen border-image-outset <length [0,∞]> example by Fafowora Sunkanmi (@sunkanmii-the-styleful) on CodePen.

<number [0,∞]>

In CSS, a number value is similar to a <length> value, but it does not include a unit of measurement. If we set a number value for the border-image-outset property, it will be interpreted as a multiple of the border-width value. Specifically, the computed value will be the product of the border-image-outset value and the border-width value.

 border-image-outset = <number> * border-width

Say we have the following style rule:

 
    .container {
  border-image-outset: 4;
  border-width: 1rem;
}

To calculate the border image offset based on the border-image-outset property, we need to multiply the unitless <number> value of the property (in this case, 4) by the border-width value (which is 1rem in this example). This multiplication results in a total border image offset of 4rem.

 border-image-outset = 4 * 1rem = 4rem

See the Pen border-image-outset <number [0,∞]> example by Fafowora Sunkanmi (@sunkanmii-the-styleful) on CodePen.

border-image-outset vs. border-image-width

Although some aspects of their values are similar, border-image-width and border-image-outset are distinct CSS properties that affect different aspects of the border image. Both properties can accept up to four values, and they can both use <length> and <number> values. However, border-image-width specifically alters the physical dimension of the border image area, while border-image-outset modifies the distance between the border image and the content box, enabling the border image to extend beyond the border box. These differences highlight how each property has a unique impact on the border image.

Here are a few points that you should consider or bear in mind.

A few more things about the border-image-outset property worth knowing:

  1. To ensure that an element's borders and padding do not add to its physical width and cause it to appear larger than intended, it is important to set the box-sizing property of the element to border-box. This can be achieved by using the universal selector in CSS and setting box-sizing to border-box, like so: * { box-sizing: border-box; }.
  2. It is not possible to use negative values for this property.
  3. If a border-image extends beyond the border box of an element, it will not trigger scrolling, and any parts that overflow will be invisible to mouse events and unable to capture events.
  4. While outset images do not cause a scrolling mechanism, it is possible for them to be clipped by an ancestor element or the viewport.

Demo

Modify the values of border-image-outset, border-image-width, and border-width in the following code to observe the impact of each input on the size of the image:

See the Pen border-image-outset demo example by Geoff Graham (@geoffgraham) on CodePen.

Labels:

Comments

Post a Comment

Hello,

Thank you for taking the time to leave a comment! Your feedback is important to us and we appreciate any suggestions or thoughts you may have. We strive to create the best possible experience for our users and your comments will help us achieve that goal.

If you have any questions or concerns, please don't hesitate to reach out to us. We're here to help and are always happy to hear from our users.

Thank you again for your comment and have a great day!

Best regards,
NewWebSofts

Popular posts from this blog

Styling SVGs with CSS

Styling SVGs with CSS SVGs are a versatile and powerful format for creating high-quality graphics on the web. However, by default, SVGs can appear plain and unstyled, which can make them feel out of place in a modern web design.That's where CSS comes in. By using CSS to style SVGs, you can add color, gradients, shadows, animations, and other visual effects that make them more dynamic and engaging. Back to TOC Table of Contents What is SVG? Inline vs External SVGs Basic Styling Techniques Advanced Styling Techniques Animation Demo • What is SVG? SVG stands for Scalable Vector Graphics. It is a vector graphics format that uses XML to define two-dimensional graphics. Unlike raster graphics, such as JPEGs or PNGs, SVGs can be scaled without losing quality, making them ideal for use on websites and other digital media. • Inline vs External SVGs SVGs can be...
Post a Comment
Read more

Creating custom CSS shapes and icons

Creating Custom CSS Shapes and Icons Custom CSS shapes and icons refer to unique visual elements that are created using Cascading Style Sheets (CSS) rather than using traditional image formats such as JPEG, PNG, or SVG. By using CSS, developers can create custom shapes and icons that can be easily scaled, manipulated, and styled without having to rely on external image files. Back to TOC Table of Contents Introduction Creating Shapes with CSS Creating Icons with CSS Demo • Introduction In this article, we will learn how to create custom shapes and icons using CSS. We will explore different techniques and examples to help you understand how CSS can be used to create unique visual elements for your website. • Creating Shapes with CSS Creating custom shapes with CSS can be done using a variety of techniques such as using borders, gradients, and pseudo-...
Post a Comment
Read more

CSS Glowing Corners Effects

CSS Glowing Corners Effects CSS glowing corners effects are a great way to add an extra touch of style to your website or app. By applying a subtle glowing effect to the corners of your elements, you can create a sense of depth and dimension that makes your design stand out. Back to TOC Table of Contents Introduction CSS Code Examples Conclusion Introduction CSS glowing corners effects are a popular way to add some style and visual interest to box elements on a webpage. With some simple CSS code, you can create a glowing effect around the corners of a box, which can be customized in terms of color, size, and intensity. In this article, we'll go over the basic CSS code for creating these effects, as well as some examples of how they can be used on a webpage. CSS Code The CSS code for creating glowing corners effects...
Post a Comment
Read more