Spacing between borders in a list - css

Question

i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.
This is my code: https://jsfiddle.net/w1n72hkx/3/
HTML:
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
CSS:
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
display: inline;
padding-right: 5px;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
Here i attach an image of how it should look like:

Answer 1

Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding: 0 5px;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
padding-right: 5px;
/*Here' what changed*/
display: inline-block;
margin: 5px 0;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>

Answer 2

There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g.
.barraDatosSociales li {
display: inline;
padding-right: 5px;
position: relative;
top: -2px;
}
or you could add a padding-bottom to the outer container
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding-bottom: 2px;
border-color: DarkTurquoise;
}

Answer 3

You need a little modification in the css for the list-items.
Inline elements do not accept top/bottom padding and margins. So try using display: inline-block
.barraDatosSociales li {
display: inline-block;
padding: 5px 15px;
}