CSS border-left/right не отображается должным образом

Question

* EDIT

Я немного подпрыгнул пистолетом, его нижняя граница, которая его вызывает.

Новый вопрос:

Вы можете удалить изображение кадра эффект от границы?

---

Так у меня есть этот CSS код на DIV:

border-left: 5px solid #009933; 

Он отображает штраф в Safari:

Но это показывает, как это в Firefox и Chrome:

Итак, я думаю, мой вопрос в том, почему Firefox и Chrome показывают его по-другому и как я могу заставить его выглядеть так, как показывает Safari?

Благодаря

Answer 1

Точный рендеринг пограничных углов различаются между браузерами.

С толстыми границами браузер пытается сделать диагональную границу между границами. Пиксели прямо в углу можно получить цвет от одной из границ:

****************** 
+***************** 
++**************** 
+++*************** 
++++ 
++++ 
++++ 

или другая граница:

+***************** 
++**************** 
+++*************** 
++++************** 
++++ 
++++ 
++++ 

Различных браузеры будут использовать любого из этих двух подходов, но по-другому на все четыре углов элемента. Я когда-то сравнивал, что используют разные браузеры, и почти казалось, что каждый разработчик браузера вышел из своего пути, чтобы выбрать подход, который не использовал ни один другой браузер.

В вашем случае Firefox и Chrome используют горизонтальный цвет границы для границы в левом нижнем углу.

Чтобы получить боковые границы идти снаружи, т.е .:

++++****************** 
++++****************** 
++++****************** 
++++****************** 
++++ 
++++ 
++++ 
++++ 

вы бы использовать один элемент внутри другого, и установить вертикальные границы на внешнем элементе и горизонтальные границы на внутреннем элементе.

Пример (с преувеличенной границей шириной, чтобы показать эффект):

.outer { border: 10px #0c0; border-style: none solid; } 
 
.inner { border: 10px #ccc; border-style: solid none; }

<div class="outer"><div class="inner">Demo</div></div>