Border around a DIV limited to 3 sides of the rectangular border

[MatthewBOnline]

Hi,

I have designed 3 DIVs next to each other. The problem is when you add a 1px border the border is doubled (double thickness) where two of the three DIVs touch one another.

How can I set the border to appear for only three edges. (as I will be using the border of the neighbouring DIV.)

Thanks,

Matt.

[RyanReese]

Are the divs set as table-cells? If not, you will need to just do something like set a left border univerally on all 3, and then on last-child add in the right border.

If they are table-cells (most of the time you should probably want this), you can add in border-collapse
http://www.w3schools.com/cssref/pr_border-collapse.asp

[dresden_phoenix]

As Ryan said if you are displaying as table-cell that would set a border collapse and display a a uniform border width.

of course, the DIVs will also behave exactly like table cells in the same table row, that may or may not be what you want.

If it’s not you could use an adjacent sibling selector and some logic.

p{ float:left; border: 1px solid; padding:10px;}
p+p{ border-left:none; }

hope that helps

[MatthewBOnline]

I have used the
border-left:none;
and this is working fine.
Thanks,

Matt.