I am having a problem using css to have different borders in my div. I need a card (div) that has "normal" solid border on the left, top and right sides of the div. However, in the bottom, I need a specific border image.
I am able to have the image in the bottom border OR the "normal" border on the three sides, but I do not know how to have both at the same time.
When I put the image, it goes to all borders.
I am using the following code to the bottom image border:
border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;
Do you know any way to have a normal solid border on the three sides and the image in the bottom border?
If I change the border-width to more than zero, appears the image, not the normal solid border.
Thanks in advance!
I actually was able to do this by adding a div inside another div.
.div-outside-class {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #e6e9ee;
border-radius: 10px;
}
.div-inside-class {
border-style: solid;
border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;
margin-bottom: -16px;
}
HTML code is something like that:
<div class="div-outside-class">
<div class="div-inside-class>
</div>
</div>