CSS border-image-outset Property

CSS border-image-outset Property

The property specifies the amount by which the border image area extends beyond the border box.

Syntax -

border-image-outset: length|number|initial|inherit;

Now we will see the values and there descriptions mentioned in above syntax -

length	A length unit specifying the appearance of border-image from the edges, and it has default value 0.
number	Represent multiples of the corresponding border-width
initial	Set this property to its default value.
inherit	Inherits this property from its parent element.

Now we will see Example -

Example -

<!DOCTYPE html>
<html>

<style>
p{
border: 4px solid transparent;
width:510px;
height: 200px;
text-align: center;
border-image: url(image1.jpg) 40 round;
padding: 10px;
border-image-slice: 30;
border-image-width: 10px;
border-image-outset: 10px;
}
</style>

<body>

<p>Thi is a sample peragraph Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et officiis, praesentium eos voluptas maiores porro, saepe perspiciatis perferendis, rerum doloribus expedita quam excepturi quas voluptatum quos quidem iure aliquid exercitationem!</p>
</body>

</html>

Ouptut -