CSS Border Right Issue

Question

I got issue with my border right in my <li> as you see the yellow right border is a bit trimmed at the bottom,I tried find a solution for this but I could not, this happen when the user zoom in the browser.

any ideas what can be?

this is my jsfiddle: https://jsfiddle.net/veft8jw9/

Answer 1

You could use box shadows instead of borders like so:

.sidebar-nav li {
  box-shadow: inset 0 -1px 0 0 blue;
  padding: 15px;
}

.sidebar-nav li:hover {
  box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
  cursor: pointer;
}

Answer 2

it's the default rendering of border. when the borders are applied on same element, this is how they connect with adjacent border

You can use :after on li tags and display it on hover as shown in fiddle below.

 div { width: 200px; height: 200px; border: 50px solid; border-color: red blue green yellow; } /* your solution */ .sidebar-nav li { position: relative; border-bottom: 1px solid blue; padding: 15px; } .sidebar-nav li:hover:after { content: ''; display: block; border-right: 5px solid yellow; position: absolute; width: 5px; height: 100%; right: 0; top: 0; } 

 <div></div> <h1>your solution</h1> <ul class="sidebar-nav"> <li>link 1</li> <li class="active" au-target-id="34"> link 2</li> <li class="" au-target-id="34"> </ul> 

Answer 3

CSS borders all have chamfers at their ends to fit with the connecting border.

I would suggest applying a wrapper around the bordered div with a yellow background. Then apply right padding to the bordered div to get the yellow area.

Answer 4

you can provide border with pseudo css, please use below css for same html.

.sidebar-nav li {
    border-bottom: 1px solid blue;
    padding: 15px;
    position:relative;
}

.sidebar-nav li:hover {
    cursor: pointer;
}

.sidebar-nav li:hover:after {
    content:"";
    position:absolute;
    width:5px;
    top:0px;
    bottom:0px;
    right:0px;
    background:#f00;
}