CODEWITHSUNDEEP
cssborder
Jake Ball
Jake Ball

Reputation: 808

CSS Border height different on each side

I am wondering if a border like this would be possible in pure css? There will be no content within this box, only an image within the future.

Possible?

I would like to achieve this in pure CSS, with no jQuery. I have looked around and it seems it isn't really possible, however with CSS constantly evolving I was wondering if it was possible apart from using nested divs etc.

Cheers!

Upvotes: 0

Views: 1050

Answers (3)

aaronburrows
aaronburrows

Reputation: 1020

You can do it with only one div if you use pseudo elements. jsFiddle here

HTML:

<div id="wrapper">
     <img src="http://www.placekitten.com/200/100" />
</div>

CSS:

#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
    border-left: 1px solid #f00;
    border-bottom: 1px solid #f00;
}
#wrapper::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: -1px;
    right: -1px;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
}

Upvotes: 1

kelly johnson
kelly johnson

Reputation: 1636

Just for the 'think' of it, you could also just stick a small graphic at the bottom right of a div (as a background image) and use a border on the left and bottom. Still just manipulating it via css with one small graphic but at least the height and width would be dynamic and not stuck as if using a full image.

Would also avoid A LOT of extra mark-up and css. 1 div, 1 css declaration and 1 small image.

Upvotes: 0

j08691
j08691

Reputation: 207901

You can fake it. Like this jsFiddle example.

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="bottom"></div>
    <img src="http://www.placekitten.com/200/100" />
</div>

CSS

#top, #bottom {
    width: 200px;
    height:50px;
    position:absolute;
    left:-1px;
}
#bottom {
    border-left: 1px solid #f00;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
    bottom:0;
}
#top {
    border-left: 1px solid #f00;
    top:0;
}
#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
}

Upvotes: 1

Related Questions