📅 Conexão KingHost 🚀 Conteúdos exclusivos para o seu negócio evoluir no digital 💰

Kinghost | Blog

Tutorial – Estilizando Bordas com CSS

Publicado em 13/10/2015

Atualizado em 26/04/2023

O CSS trouxe muitos benefícios para o uso de elementos gráficos no webdesign, tornando a administração do layout muito mais simples através da folha de estilos. O uso do CSS para a estilização de bordas permite o emprego de uma grande variedade de estilos e outros elementos. Confira nesse tutorial algumas configurações básicas para a estilização de bordas que podem ajudar na criação de seus projetos!

Para começar, há três configurações principais que você pode mudar em bordas:
border-width
border-color
border-style

Por exemplo, o código abaixo irá aplicar uma borda de 1px para um elemento:
border: 1px solid black;

Podemos modificar essa sintaxe um pouco:
border-width: thick;
border-color: black;
border-style: solid;

Como visto neste exemplo, além da passibilidade de passar um valor específico (no caso de 1px) para border-width, é também possível trocar o valor por uma das três palavras-chave que expressam a largura da borda: thin (fina), medium (média), e thick (grossa):

utilização de CSS para estilização de bordas

Estilos de borda com CSS

Estes atributos determinam como as bordas serão apresentadas:

Color
As cores podem ser expressadas utilizando:
código hexadecimal, exemplo: #000000
código rgb, exemplo: rgb (0,0,0)
nome da cor em inglês, exemplo: black

Style
A seguir, alguns estilos de borda que podem ser expressados através das seguintes variáveis:
Para não utilizar bordas: “none” ou “hidden”
Para ter uma borda pontilhada – border-style: dotted;
Borda tracejada – border-style: dashed;
Borda com caneleta – border-style: groove;
Borda contínua – border-style: solid;
Borda dupla – border-style: double;
Borda em ressalto – border-style: ridge;
Borda em baixo relevo – border-style: inset;
Borda em alto relevo – border-style: outset;

Width
Como já demonstramos, além de um valor específico é possível utilizar o seguinte para expressar a largura das bordas:
Borda fina: “thin”
Borda média: “medium”
Borda grossa: “thick”
Para definir um comprimento: “length” seguido de um valor em uma medida reconhecida pelo padrão CSS, por exemplo px, pt ou cm.

Exemplo de uso no código:

<html>
<head>
<style type="text/css">
p.solid {border-style: solid}
</style>
</head>
<body>
<p class="solid">
Uma borda sólida</p>
</body>
</html>

 

Lembre-se: os estilos não aparecerão idênticos em todos os navegadores. Escreva seu CSS para os navegadores mais modernos, fornecendo alternativas no código para navegadores menos utilizados, como o Internet Explorer 5.0.

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Leonéia

Leonéia Evangelista

é bacharel em Comunicação Digital pela Unisinos e mestre em Bibliotecas Digitais pelo programa Digital Library Learning (Erasmus Mundus). Trabalha com web há mais de 8 anos e atualmente cursa MBA em Marketing Estratégico.

Leonéia

Leonéia Evangelista

é bacharel em Comunicação Digital pela Unisinos e mestre em Bibliotecas Digitais pelo programa Digital Library Learning (Erasmus Mundus). Trabalha com web há mais de 8 anos e atualmente cursa MBA em Marketing Estratégico.

Compartilhe esse conteúdo com alguém que possa gostar também

Conteúdos relacionados

Você certamente já passou pela frustração de abrir um site que demora uma eternidade para carregar. Então, sabe como isso é irritante, não é mesmo? Com isso, sabe que a velocidade do site desempenha um papel fundamental na experiência dos usuários e no sucesso do seu negócio online.  Neste artigo, você vai conhecer as melhores...
Se você é um Microempreendedor Individual (MEI), sabe que gerenciar sua empresa pode ser desafiador. Uma vez que, além de cuidar das finanças, lidar com clientes e fornecedores, você também tem a responsabilidade de cumprir com suas obrigações fiscais.  Uma dessas obrigações é fazer a declaração anual de faturamento, que é fundamental para manter sua...
Se você deseja entender como fazer registro de marca, este é o conteúdo certo. Afinal, vamos te explicar tudo sobre o assunto. Registrar a marca do seu negócio é a melhor forma de garantir os seus direitos de uso, bem como protegê-la da concorrência. Além disso, a marca registrada faz com que as pessoas vejam...
Para saber como montar servidor VPS, é importante saber que a sigla significa Virtual Private Server, um tipo de servidor virtual privado que oferece desempenho superior aos serviços tradicionais de hospedagem. Para ouvir o conteúdo completo, é só apertar o play! Ao contrário dos servidores compartilhados, em que vários usuários compartilham o mesmo servidor, um...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você