HTML Básico: Aplicando efeitos CSS em bordas
Neste tutorial de HTML básico iremos aprender a estilizar as bordas. Iremos aplicar efeitos CSS em bordas de diversos elementos em HTML.
As tabelas, assim como muitas propriedades html podem ser estilizadas por meio de CSS, e essa estilização pode ser feita para cada elemento e ela preferencialmente deve ser feita em um arquivo separado, nos exemplos a seguir irei usar o mesmo arquivo, fazendo a estilização inline, mas não é recomendável, lembre-se sempre de usar um arquivo .css separado e linkado dentro da tag , como explicado nesse artigo sobre Como criar um layout em duas colunas com HTML e CSS.
Nos exemplos a seguir irei mostrar como esses efeitos funcionam, para melhor aprendizado é aconselhável que você visualize o efeito e a regra utilizada, além de reproduzir o tutorial em seu editor html, testando com diversas variações e vendo o que acontece no seu navegador.
Vamos ver agora como podemos aplicar efeitos CSS em bordas em HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Trabalhando com Bordas</title>
<style type="text/css">
h3 {
border-width: medium;
border-style: solid;
border-color: #F00;
}
p {
border-width: 3px;
border-style: dashed;
border-color: #0F0;
}
</style>
</head>
<body>
<h3>Borda média, contínua e vermelha</h3>
<p>Borda 3px, tracejada e verde</p>
</body>
</html>Listagem 1. Border-width, border-style e border-color
O resultado do código pode ser visto a seguir:
Abaixo iremos ver os exemplos com as propriedades border-style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trabalhando com Bordas</title>
</head>
<body>
<p >Borda solid</p >
<p >Borda dotted</p>
<p >Borda dashed</p >
<p >Borda double</p >
<p >Borda groove</p >
<p >Borda ridge</p >
<p >Borda inset</p >
<p >Borda outset</p >
</body>
</html>Listagem 2. Usando border-style
O código acima ficará da seguinte forma:
Também podemos definir larguras para as bordas, e definindo individualmente para cada uma das bordas, abaixo irei mostrar um exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trabalhando com Bordas</title>
<style type="text/css">
p {
border-style: solid;
border-bottom-width: 20px;
border-top-width: 10px;
border-right-width: 2px;
border-left-width: 5px;
}
</style>
</head>
<body>
<p>Borda com espessura inferior de 20px, superior de 10px, da esqueda de 5px e da direita de 2px</p>
</body>
</html>Listagem 3. border-width
O exemplo acima ficará dessa forma :
É altamente recomendável por questões de otimização do site que você use as propriedades CSS abreviadas, fazendo assim com que ela demore menos tempo para carregar e fique em um padrão melhor e mais bonito também.
Dessa forma você pode declarar todas as 3 propriedades das bordas em uma única instância, obedecendo sempre a sintaxe padrão, que é border: size style color;, procure sempre usar a mesma ordem como padrão, para facilitar você e outra pessoa que vá atualizar o código futuramente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trabalhando com Bordas</title>
<head>
<style type="text/css">
p {
border: thick groove #3F0;
}
</style>
</head>
<body>
<p>Bordas em declaração única</p>
</body>
</html>Listagem 4. Declarando todas as propriedades e uma única instância
O resultado desse código deverá ficar assim:
Espero que tenham gostado e entendido como funcionam as propriedades das bordas em html, como pudemos ver é possível estilizar de diversas formas diferentes, vai da sua necessidade e sua criatividade.
Fiquem à vontade em testar com exemplos próprios exemplos e deixem a criatividade fluir, qualquer dúvida fique a vontade de perguntar nos comentários.
Confira também
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo