CODEWITHSUNDEEP
htmlcssborder
hias
hias

Reputation: 23

CSS border collapse different sizes in a div

Please take a look here: http://jsfiddle.net/ztu267zp/1/

border:3px solid grey;
border-bottom: 8px solid red;

At the bottom corners you can see, that both the grey and the red borders intersect diagonally.

Can I cut the grey border to end at the bottom of the DIV and the red border having 100% width over the full distance?

Thank you very much,

Doing it right now with box-shadows, but also here, there is no clean edge in Chrome and FF:

https://i.sstatic.net/pikLU.jpg

Thanks matt

Upvotes: 2

Views: 492

Answers (2)

Ghostff
Ghostff

Reputation: 1458

its not possible but you can use something like this

<div id="bord">
<div class="line-cover">
</div>

css

#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 8px solid white;
}
.line-cover{
position: relative;
border-bottom: 8px solid red;
width: 100%;
top: 200px;
padding: 0 3px;
left: -3px;
}

Fiddle here

Upvotes: 2

pavel
pavel

Reputation: 27092

What about st. like that, using pseudoelement after?

#bord{
    height:200px;
    width:200px;
    border:3px solid grey;
    border-bottom: 0;
    /*border-bottom: 8px solid red;*/
    position: relative;
}

#bord:after {
    display: block; 
    background: red; 
    height: 8px; 
    width: 100%; 
    content: ''; 
    position: absolute; 
    bottom: -8px; 
    left: 0;
    margin: 0 -3px;
    padding: 0 3px;
}

http://jsfiddle.net/ztu267zp/4/

Upvotes: 1

Related Questions