CSS horizontal and vertical lines between elements

Question

I'm having trouble trying to implement the styling shown in this image using CSS. My problem is how to make the horizontal yellow line over the title "nossos numeros" and the vertical blue lines between "Cursos", "Alunos" and "Aulas".

I'm using also Bootstrap 4.

I want this:

I did this:

border-right: 1px blue solid;  
border-top: 2px yellow solid;

but now how I can set the size of the border that I want with a color ? Thanks in advance!

Answer 1

For the yellow lone above text try:

border-top: 1px yellow solid;

for the verticle blue line try

border-right: 1px blue solid;