div：折叠边框+更改悬停时边框的颜色+边框半径？

Question

this seam easy but i didn't find yet any way to do it. i have 3 divs (but the solution must work for n divs) like on the schema below :

| div 1 || div 2 || div 3 |

ex:

i want normal div like this :

on hover of a particular div i want ALL border of this div to have another color like this :

and finally, what i can't do, i want corner like it's show here:

i want first to collapse all the border. that easy with border-collapse:collapse. but After i want also to change the border color of the full cell on hover (top + left + bottom + right border). that also easy with border: 1px DOUBLE #000. But last (i block on this point) i want also a round corner on the top and bottom left of div 1 and on the top and bottom right of the div 3

it's look like that with border-collapse:collapse their is no way to have round corner ... so need to find another solution

EDIT: I try with the relative position and z-index and it's work a little better ! however i need to know how to move the 2nd div by 1px on the left, the 3th div by 2 pixels on the left, ... and the n div by n-1 pixels on the left?

Answer 1

Actually this is a little more complicated than you think.

border-collapse is for tables not for all block elements. Of course you can still make it work with display:table/table-cell. But the hover will still be flawed since the collapsed border will belong to the first element - if you hover the 2nd or 3rd element the left border won't change.

And only then the lack of border-radius for collapsed border comes into play.

I'd say you'll have to go for a different approach. I'd probably go for inline-block (or probably rather with "old-school" floats to avoid whitespace trouble) elements with the borders overlapping by 1px and a change of z-index in the :hover to bring the hovered element to the top and make sure its border is the one displayed.

Answer 2

Not really clear what do you want, but just to try

 .one { width: 80px; height: 40px; display: table-cell; border-collapse: collapse; border: double 1px black; } .one:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .one:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } 

 <div> <div class="one"></div> <div class="one"></div> <div class="one"></div> </div> 

Answer 3

Is it what you want?

 .container { display: table; } .container > div { display: table-cell; width: 80px; height: 40px; text-align: center; vertical-align: middle; border-top: solid 1px gray; border-bottom: solid 1px gray; border-left: solid 1px gray; } .container > div:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .container > div:last-child { border-right: solid 1px gray; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .container > div:hover { background-color: lightgray; border-color: red; border-right: solid 1px red; } 

 <div class='container'> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div> </div> 

Answer 4

Here's a solution that solves the two problems:

• Rounds the outsides. This uses first-of-type and last-of-type and the border-radius property.
• Overlaps the borders.

For the latter, instead of playing with z-indices, what happens is the right border is created and has a color changed. Then, the left-hand border of the next li is blanked out. Blanking the next li is done by using the adjacent sibling selector ( + ).

Here's a Codepen: http://codepen.io/anon/pen/JoyGxJ