Usunięcie przerwy z <ul> w <li>

Chciałbym aby obramowanie czerwone po lewej stronie dotknęło się niebieskiego outside przy lewej stronie... Czy jest to możliwe w jakiś normalny łatwy sposób?

HTML:

<div>

<ul>

<li><a href="#">ODSYŁACZ</a></li>
<li><a href="#">ODSYŁACZ</a></li>
<li><a href="#">ODSYŁACZ</a></li>
<li><a href="#">ODSYŁACZ</a></li>

</ul>

</div>

CSS:

div {
outline: 2px solid blue;
width: 200px;
margin: auto;
}

ul {
list-style: none outside none;
}

li { 
border-left: 2px solid red;
}

Nie wiem, czy to miałeś na myśli, ale może:

ul {
list-style: none outside none;
padding-left:0;
}

BTW. Myślę, że dobrym pomysłem jest dodawanie klas do standardowych znaczników i zmiana standardowego wyglądu poprzez klasy.
A przy okazji, dobrą praktyką jest używanie opcji "Inspect element" (prawy klik na dany element na stronie). Daje to pełen obraz właściwości CSS danego elementu i pozwala na edycję stylu na żywo.