用边框图像勾勒边框

Question

C an't post images yet, so here's a link to the image for better understanding the problem.

1) The div, without border.

2) The div and the border(yellow is above the blue).

3) This is what I need(yellow is outlined to bottom).

T he code should be something like this:

CSS:

.thediv {
width: 500px;
height: 200px;
background: #0000FF;
-moz-border-image: url(img.png) 12 1 round;
-webkit-border-image: url(img.png) 12 1 round;
-ms-border-image: url(img.png) 12 1 round;
border-image: url(img.png) 12 1 round;
border-style: solid;
border-width: 0 0 10px;
}

HTML:

<div class="thediv"></div>

Two words about the problem:

I need to move border outside of the div, without new HTML tags and/or absolute properties.

More than two words about the problem:

E xample 2 on the image have the blue background under the yellow one. The yellow background is the border(img.png). The problem is, if I'll use img.png half(or most) transparent, the blue color will appear, and I don't want this. Also, I don't want to use absolute values( :before:after ). I'm looking for some elegant approach.

Answer 1

As I understand it you are using a .png image which has some transparent areas.

As a result of using this as a border-image the background of the div is appearing through this border image.

There is a property, background-clip that allows us to limit the background to specific areas of an elements layout box.

Background-Clip @ MDN

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

Support is IE9 and up

In this case, you only want the background to extend to the edges of the padding (and not the border).

So:

 .thediv { width: 500px; height: 50px; /* for demo */ background: #0000FF; border-style: solid; border-width: 0 0 30px; /* for demo */ border-color: rgba(255, 0, 0, 0.5); margin-bottom: 1em; ; } .clip { background-clip: padding-box; ; } 

 <div class="thediv"></div> <div class="thediv clip"></div> 

As you can see, without the "clipping" the border and background are combined, with the clipping, the border stands alone.

Answer 2

Set the box-sizing property as content-box . This will exclude the border from the box's width. I think it has been set as box-sizing: border-box; somewhere. Please use the below CSS:

.thediv {
    box-sizing: content-box;
}