CODEWITHSUNDEEP
css
bambam
bambam

Reputation: 11

CSS Border Right Issue

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?

enter image description here

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

Upvotes: 1

Views: 215

Answers (4)

Sunil Singh Rawat
Sunil Singh Rawat

Reputation: 96

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;
}

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

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>

Upvotes: 1

Lars Beck
Lars Beck

Reputation: 3584

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;
}

Upvotes: 2

Stephen Lane
Stephen Lane

Reputation: 132

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.

Upvotes: 0

Related Questions