CODEWITHSUNDEEP
htmlcss
Thomas Russell
Thomas Russell

Reputation: 5980

Different border images top and bottom

I am trying to make a <div class="post"> element have different top and bottom border-images (to give the impression of a kind of pocket in the page). I can get rid of the side borders by using the following:

.post {
    width: 980px;
    border-image: url(./images/border-post-top.png);
    border-width: 23px;
    border-left-width: 0px !important; 
    border-right-width: 0px !important;
}

However, as far as I know, there is nothing that allows me to specify different top and bottom borders. This wouldn't be a problem if the border for the bottom of the <div> was rotated by 180 degrees or reflected in the x-axis, but I cannot do this either. Is there any way around this problem, or do I need to use two separate <img> elements at the beginning and end of my post div element to achieve this?

Upvotes: 0

Views: 1342

Answers (2)

D Flexer
D Flexer

Reputation: 1

Answer including vendor prefixes for mixin or whatnot

.post {
    border-style: solid;
    border-width: 23px 0 23px 0;
    -moz-border-image: url(img/border-full.png) repeat;
    -webkit-border-image: url(img/border-full.png) repeat;
    -o-border-image: url(img/border-full.png) repeat;
    border-image: url(img/border-full.png) repeat;
    -moz-border-image-slice: 23 0 23 0;
    -webkit-border-image-slice: 23 0 23 0;
    -o-border-image-slice: 23 0 23 0;
    border-image-slice: 23 0 23 0;
    -moz-border-image-width: 1 0 1 0;
    -webkit-border-image-width: 1 0 1 0;
    -o-border-image-width: 1 0 1 0;
    border-image-width: 1 0 1 0;
}

Upvotes: 0

C3roe
C3roe

Reputation: 96306

Put both “parts” into the same image, and use border-image-slice to determine what gets displayed where.

This property allows you to slice your image into nine “regions”, the outer eight of which are used for the borders and their “corners”, and the ninth to fill the background of the element (the latter only if keyword fill is set).

Upvotes: 1

Related Questions