CSS border-right не корректно отображает

У меня есть меню, когда элемент меню активен, он должен иметь границу справа, проблема в том, что граница не отображается правильно, обратите внимание на нижний край границы.CSS border-right не корректно отображает

Это изображение показывает вопрос: http://imgur.com/FC1n8qA

Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (Полный экран для лучшего обзора)

CSS код:

.border { 
    border-right:4px solid #000; 
}

Спасибо,

источник

2014-09-04 shadeed9

Что такое ваш предполагаемый результат здесь? То, что вы показываете, действительно кнопка с рамкой справа. – Antiga

Это из-за вашего 'border-bottom'. Если вы удалите его, он отлично работает. Вместо этого вы можете использовать псевдоэлемент, а не границу. –

@Antiga. Да, это показывает границу, но проблема в том, что ее край выглядит суровым. – shadeed9

Как уже упоминалось, проблема заключается в том, что нижняя граница перекрывает правый. Таким образом, возможным решением является «подделкой» границы с использованием :after псевдо, поместив его справа от элемента:

Updated JSFIDDLE

.border { 
    position: relative; 
} 

.border:after { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 4px; 
    background: black; 
    content: "\00a0"; /* invisible content */ 
}

источник

2014-09-04 16:02:55 LcSalazar

Рандеринг верный.

Взгляните на this:

enter image description here

border: 10px solid black; 
border-right-color: red; 
border-bottom-color: blue; 
border-left-color: green;

Обратите внимание, как границы встречаются в углах. Элементы вашего меню имеют толщину правой границы и тонкую нижнюю границу. По пути границы в углах толстая правая граница выглядит слегка криво на дне. Попробуйте удалить нижнюю границу и посмотреть, как правая граница снова становится прямой.

Вы можете попробовать вложенные элементы в пункт меню и применить border-bottom и border-right к различным элементам или использовать псевдоэлемент для исправления внешнего вида.

источник

2014-09-04 16:00:01 Mouagip

Границы встречаются под углом, так что вы должны использовать альтернативу для правая граница

box-shadow будет работать достаточно хорошо

JSfiddle Comparison (преувеличенное)

HTML

<div class="border"> </div> 

<div class="shadow"> </div>

CSS

.border, 
.shadow { 
    background-color: grey; 
    width:100px; 
    height:100px; 
    margin-bottom: 10px; 
    border-bottom: 5px solid lightgrey; 
} 
.border{ 

    border-right: 20px solid black; 
} 

.shadow { 
    box-shadow: 10px 0 0px 0 black; 
}

источник

2014-09-04 16:04:39

CSS border-right не корректно отображает

ответ

Смежные вопросы