CODEWITHSUNDEEP
htmlcss
Number945
Number945

Reputation: 4940

border-image-outset in CSS

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

Now my image will cover the area border-image-outset + border-width + boder-image-width.

But my example shows me that my understanding is wrong. To simplify, I don't define any border-image-width. We will just make use of border-width + border-image-outset.However, we will use outline shorthand property to see where actual border will lie.

Border image used:

enter image description here

Code:

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

        p.ShowingBorderImageOutsetExample{
            border: 1px solid black;
            width:500px;
            border-image-source: url("1.png");
            border-image-slice: 20%;
            border-image-outset: 6;
            outline: 1px solid black;
        }

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

The output is as follows:

enter image description here

The black line is outline. The coloured line is our image border.

The question is should not the image border covers a width of 7px ( 6px of border-image-outline + 1px of border-width) whereas it covers only 1px in output?

Upvotes: 2

Views: 543

Answers (1)

Asons
Asons

Reputation: 87191

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.sstatic.net/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.sstatic.net/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>

Upvotes: 2

Related Questions