Search code examples
htmlcssborder

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

Solution

  • 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/