Home/ Questions/Q 7928673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:48:28+00:00

How can I make border-left the same height as border-right? In other words, how

  • 0

enter image description here
enter image description here

How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px “gap”.

.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)

    enter image description here

    If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.

    EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.

    • 0