Border of different colors

Question

I want my text to have the borders as follows:

Top: black
Side: Grey

Follow an example of how I’d like you to stay:

Follow image as far as I can. How do I make the top edge black and increase the distances from the sides of the text ? Follows HTML and CSS I’m using.

.explicacao_produto{
 border: 1px solid #C0C0C0;
margin-left: 10px;
}
    <h:panelGroup layout="block" styleClass="explicacao_produto">
                       <h2>Bermuda Lacoste</h2>
                       <p>texto</p>

                       <h4 class="dimensao">Dimensões</h4>
                       <p>- Altura: 9,5cm</p>
                       <p>- Diâmetro: 8cm</p>
                       <p>- Capacidade: 300ml</p>
                       </h:panelGroup>

Answer 1

Manipulate borders with css:

When adding borders to your page elements, you have the option to individually manipulate each segment of that edge (top,right,left,bottom).

Manipulating the top and bottom edges:

border-top: 1px solid #000;
border-bottom: 1px solid #000;

Manipulating the side edges:

border-left: 1px solid #CCC;
border-right: 1px solid #CCC;

To increase the internal distance of the element we use the padding

padding: 5px;

The estate padding can also be manipulated by each segment of the object (top,right,left,bottom).

I don’t know if you already know this, but the site W3 Schools provides great help in this type of learning.

Check out this example of tutorial on edges on the W3 website.

Answer 2

Using border-right-color and border-left-color for vertical and border-bottom-color and border-top-color for them you control better what color of each border. The distance between the text and the border you use the padding.