CODEWITHSUNDEEP
htmlcss
xcoder new
xcoder new

Reputation: 31

css border styling for div

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/

Upvotes: 1

Views: 307

Answers (4)

varad mayee
varad mayee

Reputation: 619

A way to do that by adding margin-bottom

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

Upvotes: 0

maryisdead
maryisdead

Reputation: 1810

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>

Upvotes: 0

U r s u s
U r s u s

Reputation: 6968

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.

Upvotes: 0

Pavel
Pavel

Reputation: 76

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/

Upvotes: 1

Related Questions