css border styling for div

Question

У меня есть div с правой и нижней границами, но при применении цвета рамки вправо он выглядит неполным (вид разлома) из-за данного стиля html. Есть ли какой-либо css-трюк или какая-либо работа вокруг, чтобы переопределить правильную границу, будет проходить через хороший способ?

.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> 

проверка ниже ссылку,

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

Answer 1

Try добавить краю дна: -1px до .bd Однако это не лучшая практика, но должно помочь.

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

http://jsfiddle.net/uoo5utbv/

Answer 2

Это просто путь границы оказываются в большинстве браузеров. Вы можете обойти это, используя поддельные границы, как я с помощью ::after в моем примере: 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

Если вы хотите иметь правильную границу «поток в хорошем способе», вам может применить класс к охватывающему divs так:

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; 
    } 

Проверьте новый DEMO.

Answer 4

Способ сделать это, добавив краю дна

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