CODEWITHSUNDEEP
htmlcssborderstyling
Lovelock
Lovelock

Reputation: 8085

Issues with border left and border top together

I am trying to add a border left to my selected buttons but there seems to be something odd happening I can't figure out.

You can see it in this JSFiddle.

The blue border on the left seems to have an odd 1px above it? It just doesnt sit perfectly square as i would have hoped.

HTML:

<div id="sidebarnav">
    <br>
    <a href="blog"><div class="button-selected">Blog</div></a>
</div>

CSS:

#sidebarnav {
    width:250px;
    background-color:#202020;
    height: 100%;
    float:left;
    position:fixed;
    border-right: 1px solid #bbb;
}

.button-selected {
    text-align:left;
    width: 236;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    background-color:#161616;
    color: #fff;
    border-top: 1px solid #0A0A0A;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.04) inset;
    overflow:auto;
    cursor: pointer;
    border-left: 4px solid #3498db;
}

Upvotes: 1

Views: 110

Answers (1)

John
John

Reputation: 3415

You could work around the corner seam issue by adding a pseudo-element that acts like a border. Something like the following:

.button-selected {
    /* all of your original styling here */
    position: relative; /* relative positioning required for position
                           absolute on pseudo element */        
    padding-left: 14px; /* 4px of padding added to compensate for
                           width of pseudo element */
}
.button-selected:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px; /* width of desired 'border' effect */
    background: #3498db;
}

Updated example of your jsfiddle here.

Upvotes: 2

Related Questions