I come across a problem when i want to use border right and bottom on same element. Problem is that border right is not full height.

Here are screenshots

 

 

 

CSS

 

.btn {
    padding: 40px 40px 30px 40px;
    margin: 0;
    text-decoration: none;
    text-align: center;
    color: #fff;
    cursor: pointer;
	background:#34495e;
	border-bottom:10px solid #000;
	border-right:1px solid #fff;
}
.btn:hover{
	border-bottom:10px solid #fff;
	transition-property:border-bottom .3s linear 0s;
	-moz-transition:border-bottom .3s linear 0s;
	-webkit-transition:border-bottom .3s linear 0s;
	-o-transition:border-bottom .3s linear 0s;	
}
.button-group-navigation {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    zoom: 1;
}

.button-group-navigation .btn {
    float: left;
    margin-left:0;
}

.button-group-navigation > .btn:not(:first-child):not(:last-child),
.button-group-navigation li:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
}

.button-group-navigation > .btn:first-child,
.button-group-navigation li:first-child .btn {
    margin-left: 0;
}

.button-group-navigation > .btn:last-child,
.button-group-navigation li:last-child > .btn {
    border-right:none;

}

 

HTML

 

<div class="button-group-navigation">
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
    <div class="btn"><i class="icon-heart"></i></div>
</div>

 

Does anyone know what is going on? I tried to fix it with replacing border with box shadow but its not much of solution.

 

TY in advance for any answer

Edited November 16, 201312 yr by pacovix

Pretty sure borders work on a 45 degree angle give it a try set them both at 10px you'll see what I mean

 

you could give you nav a white background and the use 1px right margin on the button

 

.button-group-navigation {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
zoom: 1;
background: #fff;
}

.btn {
padding: 40px 40px 30px 40px;
margin: 0 1px 0 0;
text-decoration: none;
text-align: center;
color: #fff;
cursor: pointer;
background: #34495e;
border-bottom: 10px solid #000;
}

yes i tried that and yes they are at 45 degree angle. Why is that so?

its just the way they work you only notice when using different colours

ty for your answer but background does not do the job, and i still cant understand why my right border isnt full height

http://jsfiddle.net/ky4Fa/

ty very much, i see that u added margin on btn, did that solved it?

ok so i understand the approach in the fiddle.

 

you removed the border right, moved the buttons right 1px with margin and added the background for container. i will use this in my code, but can you please explain me why cant i use two borders with different border width?

 

ty in advance

Because the bigger the border the more it goes out in the 45 degree angle so be adding the right border its beginning to show some of the bottom borders mitre'd edge

ty for explanation, i never thought that borders behaves like that