Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Border-image-outset In CSS

Post a Comment
This is how MDN defines border-image-outset. The border-image-outset property describes by what amount the border image area extends beyond the border box. What I understood N

Solution 1:

The border-image-outset property describes by what amount the border image area extends beyond the border box, but does not define its size, border-width/border-image-width does that.

For border-image-width, it defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the border-width, then the border image extends beyond the padding (and/or content) edge.

Or simply put, border-image-outset defines how far out border should extend, border-width and border-image-width defines its size (width of the border).

Since you only gave the border a size of 1px, and no border-image-width, that is how it will render, and if you give it 6px, and set the outset to the same, you'll get this, first p. In second p, where the outset is 12px, and the border-image-width is set to 12px, it will render all the way to the outline.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border-image-width</title>
    <style>

        p.ShowingBorderImageOutsetExample{
            border: 6px solid black;
            width:500px;
            border-image-source: url("https://i.stack.imgur.com/syjY3.png");
            border-image-slice: 20%;
            border-image-outset: 6px;
            outline: 1px solid black;
            margin-left: 10px;
        }

        p.ShowingBorderImageOutsetExample2{
            border: 6px solid black;
            width:500px;
            border-image-source: url("https://i.stack.imgur.com/syjY3.png");
            border-image-slice: 20%;
            border-image-width: 12px;
            border-image-outset: 12px;
            outline: 1px solid black;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p>
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p>
</body>
</html>

Post a Comment for "Border-image-outset In CSS"