CODEWITHSUNDEEP
htmlcssborder
Harish Boke
Harish Boke

Reputation: 557

Border-bottom overrides border-left?

Border bottom overrides on border-left so it looks like crooked at border-left bottom side. Any answer why border-bottom get preference and overrides on left?

HTML

<ul>
    <li>list 1</li>
    <li class="selected">list 1</li>
    <li>list 1</li>
    <li>list 1</li>    
</ul>

CSS

ul {
    list-style:none
}
li {
    width:300px;
    padding:10px;
    height:50px;
    background:#ddd;
    border-bottom:1px solid #333;
}
li.selected {
    border-left:4px solid #f00;
}

JSFiddle: http://jsfiddle.net/HarishBoke/8VC2c/1/

Upvotes: 1

Views: 3274

Answers (3)

Rafa Romero
Rafa Romero

Reputation: 2716

the rule is not overriden, your problem is that an 1px border with the same color as background is not visualized!

Change, for example, by border-bottom:4px solid #66E710;

Example: http://jsfiddle.net/8VC2c/3/

Hope it helps!

Upvotes: 0

Arjun
Arjun

Reputation: 1439

borders in css are diagonally intersect each other so you can not achieve that only by using borders, Please check this quastion for this...Can I have different colored left and top borders in CSS with straight join?

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9303

Consider using an alternative way to achieve this effect by using before pseudo element :

li.selected {
    background:rgb(246, 246, 246);
    position: relative;
}

.selected:before {
  content: "";
  width: 4px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #f00;
}

An example : http://jsfiddle.net/8VC2c/2/

Upvotes: 3

Related Questions