SdevLab – Tutorial | CSS Border

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Border

A propriedade border define as características do elemento border. Na tabela abaixo constam as possibilidades:

Propriedade Descrição Opções
border-width espessura da borda
  • thin: borda fina
  • medium: borda média
  • thick: borda grossa
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
border-style estilo da borda
  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo
border-color cor da borda
  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, blue, green…etc
border-top-width espessura da borda superior
  • thin: borda fina
  • medium: borda média
  • thick: borda grossa
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
border-top-style estilo da borda superior
  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo
border-top-color cor da borda superior
  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, blue, green…etc
border-right-width espessura da borda direita
  • thin: borda fina
  • medium: borda média
  • thick: borda grossa
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
border-right-style estilo da borda direita
  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo
border-right-color cor da borda direita
  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, blue, green…etc
border-bottom-width espessura da borda inferior
  • thin: borda fina
  • medium: borda média
  • thick: borda grossa
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
border-bottom-style estilo da borda inferior
  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo
border-bottom-color cor da borda inferior
  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, blue, green…etc
border-left-width espessura da borda esquerda
  • thin: borda fina
  • medium: borda média
  • thick: borda grossa
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
border-left-style estilo da borda esquerda
  • none: nenhuma borda
  • hidden: equivalente a none
  • dotted: borda pontilhada
  • dashed: borda tracejada
  • solid: borda contínua
  • double: borda dupla
  • groove: borda entalhada
  • ridge: borda em ressalto
  • inset: borda em baixo relevo
  • outset: borda em alto relevo
border-left-color cor da borda esquerda
  • código hexadecimal: #FFFFFF
  • código rgb: rgb(255,235,0)
  • nome da cor: red, blue, green…etc

Para testar cada possibilidade utilize o modelo abaixo:

<html>
<head>
<style type="text/css">
<!--
p   {
border-width: 6px;
border-style: dashed;
border-color: #FF0000;
    }
-->
</style>
<title>Teste 7</title>
</head>
<body>
<p>Teste do parágrafo com borda.</p>
</body>
</html>

Assim como em outras propriedades apresentadas, para unir todas as propriedades em uma só regra siga o modelo:

<html>
<head>
<style type="text/css">
<!--
p   {
border: 6px dashed #FF0000;
    }
-->
</style>
<title>Teste 8</title>
</head>
<body>
<p>Teste do parágrafo com borda em regra única.</p>
</body>
</html>

Até a próxima!

xD

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

2 comentários sobre “SdevLab – Tutorial | CSS Border

  1. Pingback: Tutorial CSS básico – Padding « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s