CODEWITHSUNDEEP
htmlcssborder
newbie
newbie

Reputation: 468

postion border image below the div

I'm trying to put a border image on the right side of div. And I've succeeded in doing that. But the problem is, I want the border image to stretch a little bit below the div. Is it possible to increase the height of the border image? Or should I just float the image next to the div and how should I do that?

Here's a sample code

div{
    height:200px;
    width:200px;
    background:#EA6E0E;
    border-image-slice: 0 31 0 0; 
    border-image-width: 0px 20px 0px 0px; 
    border-image-outset: 0px 0px 0px 0px; 
    border-image-repeat: stretch stretch; 
    border-image-source: url("http://i.imgur.com/pN8TPVw.jpg?1");
}
<div></div>

Upvotes: 0

Views: 57

Answers (2)

LcSalazar
LcSalazar

Reputation: 16821

If I understand what you mean, you should play with the border-image-outset property, that(MDN Docs)

describes by which amount the border image area extends beyond the border box.

The definition for a four parameter value is:

border-image-outset: top right bottom left

So, changing the third parameter in your case would extend the border a little further down:

div{
    /* ... */

    border-image-outset: 0px 0px 20px 0px; 

    /* ... */
}

Updated Fiddle

Upvotes: 3

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies.

You can reach your goal by using a span after the div:

<div></div>
<span class="divider"></span>

span {
height: 5em;
border:.../your border
}

Upvotes: 0

Related Questions