0

Quero que meu texto fique com as bordas da seguinte forma:

Topo: preto
Laterais: Cinza

Segue exemplo de como gostaria que ficasse:

inserir a descrição da imagem aqui

Segue imagem até onde consegui. Como faço para a borda de cima ficar preta e aumentar as distancias das laterais do texto ? Segue HTML e CSS que estou utilizando.

inserir a descrição da imagem aqui

.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>

2 Respostas 2

5

Manipular as bordas com css:

Ao adicionar bordas aos elementos de sua página, você tem a opção de manipular individualmente cada segmento dessa borda (top,right,left,bottom).

Manipulando as bordas de cima e de baixo:

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

Manipulando as bordas laterais:

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

Para aumentar a distância interna do elemento utilizamos o padding

padding: 5px;

A propriedade padding também pode ser manipulada por cada segmento do objeto (top,right,left,bottom).

Não sei se ja é do seu conhecimento, mas o site W3 Schools fornece grande ajuda neste tipo de aprendizado.

Confira este exemplo de tutorial sobre bordas no site do W3.

0

Usando border-right-color e border-left-color para as verticais e border-bottom-color e border-top-color para as você controla melhor qual a cor de cada borda. A distancia entre o texto e a borda você usa o padding.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .