css border styling for div

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/

It is unclear what you're asking (at least for me), could you explain better? — chiapa
– chiapa, Commented Feb 25, 2015 at 10:26
@chiapa, In DIV i have a bottom and right borders, i have added a extra class in it the right border will appear in different color. If you closely look at the each right border, you can see a small gap because of the bottom border color will differ here. But based on my sample i need a continuous flow of right side border red. — xcoder new
– xcoder new, Commented Feb 25, 2015 at 10:46

Pavel · Accepted Answer · 2015-02-25 10:32:29Z

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/

edited Feb 25, 2015 at 10:32

answered Feb 25, 2015 at 10:26

Pavel

768 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xcoder new Over a year ago

thanks for your comment. Yes its works, is there any other option other than margin. Just curious to know.

Pavel Over a year ago

You're welcome. Another option here is to use tables instead of divs (yeah I know they suck) - so for example, in your case th and tfoot cells won't have the red border, but others will.

U r s u s · Accepted Answer · 2015-02-25 10:34:40Z

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.

maryisdead · Accepted Answer · 2015-02-25 10:37:00Z

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>

varad mayee · Accepted Answer · 2015-02-25 10:44:34Z

0

A way to do that by adding margin-bottom

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

answered Feb 25, 2015 at 10:44

varad mayee

6197 silver badges19 bronze badges

Collectives™ on Stack Overflow

css border styling for div

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related