Fix gap from border-bottom none - css

Question

I have a <a> tag with border: 1px solid #CCC; border-bottom:none; style and it's leaves a tiny gap, please look at the codepen result to see what I mean. This gap appears left from login tab if the login tab is active or right from register tab if register tab is active.
HTML:
<div id="w-login">
<div id="login">
<menu id="tabs"> <a id="tab-signin" class="tab-active"><i class="fa fa-unlock-alt"></i>Login</a><a id="tab-signup"><i class="fa fa-lock"></i>Register</a>
</menu>
<div id="signin">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="si-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="si-password">
</div>
<input type="submit" value="Login" class="btn btn-primary" id="si-submit">
</form>
</div>
<div id="signup">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-1">Username:</label>
<input type="text" name="username" class="form-control col-2" id="su-username">
</div>
<div class="form-group">
<label for="password" class="control-label col-1">Password:</label>
<input type="password" name="password" class="form-control col-2" id="su-password">
</div>
<div class="form-group">
<label for="email" class="control-label col-1">Email:</label>
<input type="text" name="email" class="form-control col-2" id="su-email">
</div>
<input type="submit" value="Register" class="btn btn-primary" id="su-submit">
</form>
</div>
</div>
</div>
CSS:
#container {
height: 100%;
width: 100%;
text-align: center;
font-size: 14px;
}
#container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -3px;
}
#w-login {
display: inline-block;
vertical-align: middle;
width: 40%;
padding: 5px;
}
#login {
}
#signin, #signup {
border: 1px solid #CCC;
border-top: none;
padding: 20px 10px;
border-bottom-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-bottom-right-radius: 15px;
}
#signup {
display: none;
}
#tabs {
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
#tabs a {
padding: 10px 0;
display: inline-block;
width: 50%;
cursor: pointer;
text-decoration: none;
}
#tabs .tab-active {
}
#tab-signin.tab-active {
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active {
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
.col-1 {
width: 28%;
}
.col-2 {
width: 70%;
display: inline-block;
}
.form-horizontal .form-group {
margin-right: 0;
margin-left: 0;
}
.btn {
width: 99%;
}
.fa {
padding-right: 5px;
}
Note: the rest of the CSS styles come from Bootstrap
JS/jQuery:
$(function(){
$('#tab-signin').click(function(){
$('#signup').hide();
$('#signin').show();
switchTab();
});
$('#tab-signup').click(function(){
$('#signin').hide();
$('#signup').show();
switchTab();
});
});
function switchTab(){
$('#tabs a').toggleClass('tab-active');
}

Answer 1

I suggest the following approach.
I would take advantage of the fact that in your mark-up the two tab elements,
#tab-signin and #tab-signup, are children of the menu#tabs element.
That being the case, I would place the left, top and right borders on the #tabs element
and remove the left/top and top/right borders on the two children elements (#tab-signin and #tab-signup respectively).
The CSS for #tabs would look like:
#tabs{
padding: 0;
margin: 0;
border: 1px solid #CCC;
border-top-left-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-top-left-radius: 15px;
border-top-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-top-right-radius: 15px;
border-bottom: none;
}
To style the .tab-active cases, I would create two specific rules for the sign-in and the sign-up tabs, for the right/bottom and the bottom/left borders respectively:
#tabs .tab-active{
}
#tab-signin.tab-active{
border: 1px solid #CCC;
border-width: 0 1px 1px 0;
}
#tab-signup.tab-active{
border: 1px solid #CCC;
border-width: 0 0 1px 1px;
}
See demo at: http://jsfiddle.net/audetwebdesign/By4g5/
The problem you noticed earlier is not really a browser bug. The CSS specification does not specify exactly how browsers are to draw the corners of borders (the joints), so you are at the mercy of the browser for that particular design detail.
My approach is to avoid the problem by taking full advantage of the HTML mark-up in your code.

Answer 2

You should probably try floats but a quick fix could be negative margins...
#tabs{
padding: 0;
margin: 0px 0px -1px 0px;
}
DEMO
EDIT: inline blocks side effects, something to read ;)
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Another solution would be if set a transparent border on class .tab-active.
just using border transparent .
#tabs .tab-active{
border-bottom: 1px solid transparent;
}
Chec the DEMO.