div的CSS边框样式

Question

I have a div with right and bottom borders, but while applying the border color to right it looks incomplete(kind of breakage) because of the given html style. Is there any css trick or any work around to override the right border will flow across in a nice way?

.tb{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
width:70px;
height:18px;
zoom:250%;
}
.bd{
border-right-color:red;   
}

<div>
<div style="float: left;"> 
    <div class="tb"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb"> </div>
    <div class="tb"> </div>
</div>
<div style="float: left;"> 
    <div class="tb"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb bd"> </div>
    <div class="tb"> </div>     
    <div class="tb"> </div>
</div>
</div>

check the below link,

http://jsfiddle.net/gq7dc4rd/2/

Answer 1

Try to add margin-bottom: -1px to .bd However it's not the best practise, but should help.

.bd {
  margin-bottom:-1px;
}

http://jsfiddle.net/uoo5utbv/

Answer 2

It's just the way borders are rendered by most Browsers. You can work around this by using fake borders as I did using ::after in my example: http://jsfiddle.net/maryisdead/mtwcee03/

 .tb{ border-bottom:1px solid #ccc; width:70px; height:18px; zoom:250%; position: relative; padding-right:1px; } .tb::after{ background:#ccc; content:''; position:absolute; height:100%; right:0; top:0; width:1px; } .bd::after{ background:red; } 

 <p style="font:12px lucida grande"> <b>Note:</b> I have a div with right and bottom borders, but while applying the border color to right it looks incomplete(kind of breakage) because of the given html style, Is there any css trick or any work around to override the right border will stretch across in a nice way? </p> <div> <div style="float: left;"> <div class="tb"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb"> </div> <div class="tb"> </div> </div> <div style="float: left;"> <div class="tb"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb bd"> </div> <div class="tb"> </div> <div class="tb"> </div> </div> </div> 

Answer 3

If you want to have the right border to "flow in a nice way", you can apply a class to the containing divs like so:

HTML

<p style="font:12px lucida grande">
    <b>Note:</b> I have a div with right and bottom borders, but while applying the border color to right it looks incomplete(kind of breakage) because of the given html style, Is there any css trick or any work around to override the right border will stretch across in a nice way?
</p>
<div>
    <div class="border" style="float: left;"> 
        <div class="tb"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb"> </div>
        <div class="tb"> </div>
    </div>
    <div class="border" style="float: left;"> 
        <div class="tb"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb bd"> </div>
        <div class="tb"> </div>     
        <div class="tb"> </div>
    </div>
</div>

CSS

.tb{

    border-bottom:1px solid #ccc;
    width:70px;
    height:18px;
    zoom:250%;
}

.border{
    border-right:1px solid red;
    }   

Check the new DEMO .

Answer 4

A way to do that by adding margin-bottom

     .bd 
   {
      margin-bottom:-1px;
   }