CSS

CSS border
Aplicando estilos de borda de um
elemento!
CSS border
• No CSS, o faz parte do conjunto de propriedades dos
elementos HTML e é utilizado para adicionar um contorno ao redor
de seu conteúdo.
O que é a propriedade border?
• A propriedade border adiciona um contorno ao redor do conteúdo
do elemento HTML. E pode ser aplicada em apenas um ou em todos
os lados do elemento, ou ainda, ter valores diferentes para cada um
deles. Além disso, contém um conjunto de propriedades adicionais
que ajudam a adicionar características à borda, como o tamanho, as
cores e o estilo.
Qual a sintaxe dessa propriedade?
• A propriedade border pode ser declarada de diferentes formas.
Veja a sintaxe abaixo:

• border: border-width border-style border-color

• Em que:
• border-width: define o tamanho da borda;
• border-style: determina o estilo da borda;
• border-color: indica a cor utilizada na borda.
• Vale ressaltar que a declaração da borda pode ser feita com a sintaxe
resumida ou com a declaração individual de cada propriedade. Por
exemplo:

• border: 5px solid red;

• Ou

• border-width: 5px;
• border-style: solid;
• border-color: red;
• A borda também pode ser declarada com os valores inherit ou initial.

• border: inherit; border: initial;

Quais os valores da propriedade border?
• A propriedade border contém recursos adicionais que ajudam a
adicionar características específicas a ela. Confira como funciona cada
um deles, a seguir.
• Definindo a largura da borda: border-width
• A propriedade border-width define qual será o tamanho da borda.
Ela pode ser definida por meio de diferentes unidades de medida.
Veja as sintaxes possíveis abaixo:
Lenght
• Indica um tamanho para a borda, que pode ser valores absolutos ou
relativos, entre eles:

• px: valor numérico em pixels;

• em: corresponde a duas vezes o tamanho da fonte utilizada no elemento;
• rem: indica duas vezes o tamanho da fonte do elemento root;
• vh e vw: correspondem a altura (height) e largura (width) da área da tela
(viewport).
Exemplo:

border-width: 3px;
border-width: 1.2 em;
border-width: 2 rem;
border-width: 1.2 vh;
border-width: 1.2 vw;
Thin
• Definir a propriedade border-width igual “thin” faz com que o valor
da borda seja igual a 1px para todos os lados.

• border-width: thin;
Medium
• Quando definimos a propriedade border-width igual a “medium”,
temos o tamanho da borda correspondente a três pixels para
todos os lados.

• border-width: medium;
Thick
• Quando o valor da propriedade border-width é igual a “thick”,
significa que o elemento terá o tamanho da borda igual a cinco
pixels em todos os lados.

• border-width: thick;
Aplicando estilos a borda: border-style
• O formato da borda pode apresentar diferentes estilos. Veja quais os
possíveis valores para essa propriedade.
Solid
• O valor do estilo da borda igual a solid corresponde a uma linha
contínua ao redor do elemento ou do lado indicado.

• border-style: solid;
None
• Por padrão, os elementos são definidos com o estilo da borda
igual a none, que significa que nenhuma linha será desenhada ao
redor do elemento.

• border-style: none;
Hidden
• O valor hidden significa que existe uma borda ao redor do
elemento, entretanto, ela não será visível na página. Trata-se de
um recurso útil para adicionar mais espaço a um elemento sem
tornar a borda visível.

• border-style: hidden;
Dashed
• O estilo dashed representa uma linha pontilhada ao redor do
elemento.

• border-style: dashed;
Dotted
• O estilo dotted é representado por uma linha de pontos circulares
ao redor do elemento.

• border-style: dotted;
Double
• No estilo double são desenhadas duas linhas ao redor do
elemento. É importante dizer que o navegador faz o cálculo para
determinar a espessura de cada linha. Entretanto, a somatória
das duas linhas e o espaço entre elas correspondem ao valor
definido na propriedade border-width.

• border-style: double;
Groove
• O estilo groove adiciona um efeito de cor na borda, que faz com
que o elemento apresente a aparência como a de um botão
pressionado.

• border-style: groove;
Ridge
• O valor ridge apresenta um efeito inverso ao groove e faz com que
o elemento tenha o aspecto de um botão elevado.

• border-style: ridge;
Inset
• É um efeito aplicado em uma tonalidade mais escura que a cor
definida e faz com que o elemento tenha a aparência levemente
pressionada.

• border-style: inset;
Outset
• É um efeito inverso ao inset e faz com que o elemento tenha a
aparência levemente elevada.

• border-style: outset;
Definindo a cor da borda: border-color
• A cor da borda pode ser definida por meio de diferentes tipos de
sistema de cores. Confira como é possível indicar essa
propriedade!

• Cores RGB
• As cores RGB são representadas pela função rgb(red, green, blue)
que recebe os parâmetros referente às cores vermelha, verde e
azul.

• border-style: rgb(60, 165, 44);

Cores RGBA
• As cores RGBA funcionam de forma semelhante às cores RGB,
entretanto, contém um parâmetro adicional para indicar a
opacidade. Veja a sintaxe: rgba(red, green, blue, alpha). O
conteúdo adicional corresponde a um valor numérico definido
entre 0.0 para indicar total transparência a 1.0 para indicar total
opacidade.

• border-style: rgba(60, 165, 44, 1);

Cores HSL
• A definição das cores é feita com a utilização da função hsl(hue,
saturation, lightness), que contém os parâmetros:

• hue: indica a matiz;

• saturation: indica a saturação;
• lightness: indica a luminosidade.
• border-style: hsl(143, 98, 79);
Cores HSLA
• A definição de cores HSLA funciona de forma semelhante à HSL,
entretanto, há a adição da propriedade alpha para determinar a
intensidade da transparência. A sintaxe utilizada é hsla(hue,
saturation, lightness, alpha).

• border-style: hsla(143, 98, 79, 1);

Cores hexadecimais
• As cores hexadecimais são representadas pelas tonalidades RR
(red) — vermelha, GG (green) — verde e BB (blue) — azul. Os
valores devem ser definidos entre 00 e FF e especificados com a
expressão #RRGGBB.

• border-color: # 3CA52C;
Nome das cores
• Outra forma de definir as cores é por meio dos nomes
predefinidos utilizados pelos navegadores. Vale ressaltar que
nem todas as cores estão disponíveis. Os navegadores mais
modernos oferecem uma lista com 140 nomes de cores.

• border-color: DarkGreen; /* corresponde a: #006400 */

Redefinindo a propriedade para o valor
padrão: initial
• A borda também pode ser definida para o valor padrão do
elemento. Para isso, basta indicar o valor da propriedade border
como initial.

• border: initial;
Herdando a propriedade de seu elemento pai:
inherit
• A propriedade border pode ter as características herdadas do
elemento pai. Para isso, devemos definir a propriedade como
inherit.

• border: inherit;
Utilizando imagens como borda: border-
image
• O CSS3, que é a versão mais recente do CSS, trouxe novas
possibilidades para o uso da propriedade border. Uma delas é a
aplicação de imagens ao redor do elemento. Para isso, utilizamos
a propriedade border-image que contém a seguinte sintaxe:

• border-image: url-imagem slice width outset

Em que:

• url-imagem: corresponde ao endereço da imagem utilizada;

• slice: indica o quanto da imagem será aplicada na borda;
• width: representa o quanto da borda será preenchido com a
imagem;
• outset: o quanto a área ocupada pela imagem poderá utilizar
além do espaço da borda.
• Vale ressaltar que a propriedade border-image funciona em
conjunto com a propriedade border. É preciso defini-la e indicar a
cor como transparente para que a imagem seja exibida.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS - Border</title>
</head>
<body>
<div class="container flex-item-1">
<h2>Tamanhos da borda</h2>
</div>
<div class="container flex bordaStyleColor">
<div style="border-width: 3px">pixels</div>
<div style="border-width: 0.2rem">rem</div>
<div style="border-width: 0.5em">em </div>
<div style="border-width: 1.2vw">vw</div>
<div style="border-width: 1.2vh;">vh</div>
<div style="border-width:thin">Thin</div>
<div style="border-width:medium">Medium</div>
<div style="border-width:thick">Thick</div>
</div>
<div class="container flex-item-1">
<h2>Estilos da borda</h2>
</div>
<div class="container flex bordaWidthColor">
<div style="border-style: solid">Solid</div>
<div style="border-style: none">None</div>
<div style="border-style: hidden">Hidden </div>
<div style="border-style: dashed">Dashed</div>
<div style="border-style: dotted">Dotted</div>
<div style="border-style: double">Double</div>
<div style="border-style: groove">Groove</div>
<div style="border-style: ridge">Ridge</div>
<div style="border-style: inset">Inset</div>
<div style="border-style: outset">Outset</div>
</div>
<div class="container flex-item-1">
<h2>Cores da borda</h2>
</div>
<div class="container flex bordaStyleWidth">
<div style="border-color: DarkGreen">Cor por nome:
DarkGreen</div>
<div style="border-color: #3CA52C">Cor hexadecimal:
#3CA52C</div>
<div style="border-color: rgb(60, 165, 44)">Cor RGB:
rgb(60,165,44) </div>
<div style="border-color: rgba(60, 165, 44, 1)">Cor
RGBA: rgba(60,165,44,1)</div>
<div style="border-color: hsl(112,58%,41%)">Cor HSL :
hsl(112,41%,52%)</div>
<div style="border-color: hsla(112, 58%, 41%, 0.5)">Cor
HSLA: hsla(112,58,41,0.5)</div>
</div>
<div class="container flex-item-1">
<h2>Exemplos de borda com imagem</h2>
</div>
<div class="container flex">
<div class="bordaImagem">
Borda 1 preenchida com imagem.
</div>
<div class="bordaImagem2">
Borda 2 preenchida com imagem.
</div>
<div class="bordaImagem3">
Borda 3 preenchida com imagem.
</div>
<div class="bordaImagem4">
Borda 4 preenchida com imagem.
</div>
<div class="bordaImagem5">
Borda 5 preenchida com imagem.
</div>
<div class="bordaImagem6">
Borda 6 preenchida com imagem.
</div>
</div>
<style>
html{
font-size: 12px;
}
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
height: auto;
font-size: 10px;
text-align: center;
}
.flex-item-1{
flex: 1;
height: 20px;
margin:10px;
}
.container div{
width: 100px;
height: 80px;
flex-wrap: wrap;
margin:10px;
}
.bordaStyleColor div{
border-style:solid;
border-color: red;
}
.bordaWidthColor div{
border-width: 10px;
border-color: grey;
background-color: rgb(214, 212, 212);
}
.bordaStyleWidth div{
border-style:solid;
border-width: 10px;
}
.bordaImagem{
border: 20px solid transparent;
border-image:url([Link]) 25% round;
}
.bordaImagem2{
border: 30px solid transparent;
border-image:url([Link]) 50% round;
}
.bordaImagem3{
border: 30px solid transparent;
border-image:url([Link]) 40% stretch;
}
.bordaImagem4{
border: 50px solid transparent;
border-image:url([Link]) 100% round;
}
.bordaImagem5{
border: 50px solid transparent;
border-image:url([Link]) 25% stretch;
}
.bordaImagem6{
border: 25px solid transparent;
border-image:url([Link]) 40% repeat;
}
</style>
</body>
</html>
CSS color
O que é a propriedade color?
• Basicamente, a propriedade color é usada para a definição da cor
do texto em uma página HTML. Entretanto, ao ser associada a
outras propriedades, ela servirá para atribuir cores a elas. Por
exemplo: background-color, border-color, text-decoration-color,
text-shadow e muitas outras.
Qual é a sua sintaxe?
• A sintaxe da propriedade color é bem simples, pois conta com
apenas um atributo:

• color: value | initial | inherit

Valores da propriedade
• A propriedade color tem três possibilidades de valores. Confira cada um deles.

• Value

• Atribui um valor para a propriedade color e que pode ser definido por diferentes tipos, entre eles:

• valores em hexadecimal;
• hexadecimal com transparência;
• RGB;
• RGBA;
• HSL;
• HSLA;
• nomes das cores.
Initial
• Ao definirmos a propriedade color como initial, dizemos ao
navegador que o elemento receberá a cor padrão para o
elemento.

• color: initial;
Inherit
• O valor da propriedade color igual a inherit indica que ela herdará
essa característica do elemento pai.

• color: inherit;
Valores: tipos e como usar!
• Como mencionamos, a propriedade color pode ser definida por
meio de diferentes tipos de sistemas de cores. Confira como cada
um deles funciona.
Como usar o valor HEX em CSS?
• Os valores das cores em hexadecimal são definidos pela
combinação de três cores e escrito em formato de CSS color
codes com o símbolo # no primeiro caractere. Veja a estrutura:

• #RRGGBB
No qual:
• RR corresponde à cor vermelha (red);
• GG é referente à cor verde (green);
• BB corresponde à cor azul (blue).

• Vale ressaltar que a intensidade de cada cor pode variar entre 00 e FF.
Por exemplo:

• color: #00B718; /* corresponde a uma tonalidade verde */

• color: #B51800; /* corresponde a uma tonalidade vermelha */
• color: #1A00AF; /* equivale a um tom de azul */
Como usar o valor HTML em CSS?
• Também podemos definir o valor da propriedade com a atribuição
de CSS color names. Na prática, a linguagem HTML oferece
suporte a 140 cores que são identificadas por todos os
navegadores modernos. Veja alguns exemplos:

• color: AntiqueWhite; /* corresponde à cor #FAEBD7 */

• color: DarkGreen; /* equivale à #006400 */
Como usar o valor RGB em CSS?
• As cores RGB são definidas por meio de uma função CSS
chamada rgb(), que utiliza valores correspondentes à intensidade
das cores vermelha (red), verde (green) e azul (blue). Sua sintaxe
é:

• rgb(red, green, blue)

No qual:
• red: equivale à intensidade da cor vermelha e seu valor pode
variar entre 0 e 255 ou em percentuais de 0% a 100%;
• green: corresponde à intensidade da cor verde e segue o mesmo
critério para determinar o tom;
• blue: define a intensidade da cor azul.

• Veja um exemplo:

• color: rgb(15, 96, 22);

Como usar o valor HSL em CSS?
• Outra forma de definir as cores é por meio da função CSS hsl(), que utiliza um sistema de
coordenadas cilíndricas para determinar a cor. A função utiliza três parâmetros, são eles:

• hue: que significa matiz e identifica a cor conforme o grau da roda de cores que pode variar
de 0º a 360º;
• saturation: equivale à saturação da cor e é representado por um valor percentual, no qual
0% corresponde à tonalidade cinza e 100% equivale à cor total;
• lightness: significa à luminosidade e também é representado por um valor percentual, em
que 0% equivale à cor preta e 100% equivale à cor branca.

• Vejamos um exemplo:

• color: hsl(125, 84%, 38%);

Como usar o valor HWB em CSS?
• O valor HWB — Hue Whiteness Blackness — corresponde a uma
função CSS chamada hwb(). Na prática, ela recebe uma cor e
adiciona quantidades determinadas de tonalidades branca e
preta. Por isso, sua utilização é mais intuitiva, pois ela funciona
como uma mistura de cores. Sua sintaxe é:

• hwb(matiz, branco, preto)

Em que:

• matiz: corresponde à cor desejada e deve ser informado com

base no círculo de cores;
• branco: percentual de cor branca adicionada à cor;
• preto: percentual de cor preta adicionada à cor.
• Veja um exemplo:

• color: hwb( 125, 0%, 25%);

CSS Text Color: configurando a cor dos
textos! <html
<!DOCTYPE html>
lang="en">
<head>
<meta charset="UTF-8">
• Exemplo: <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Font Color</title>
<style>
html{
color: green;
}
p{
font-size: large;
color: #BC277E;
}
.color{
color:rgb(196, 181, 43);
}
</style>
</head>
<body>
<h2>A cor verde foi definida para todos os elementos
HTML.</h2>
<p>Exceto para os parágrafos.</p>
<h2 class="color">Ou para elementos que utilizem a
classe color.</h2>
<p>Outro parágrafo.</p>
<h3>Um título h3 com a cor padrão para a página.</h3>
</body>
</html>
CSS Background Color: configurando a cor de
fundo!
• A propriedade CSS background-color também funciona de forma
semelhante à color. Basta informarmos um dos sistemas de cores
para definirmos a opção que será exibida como fundo em um
elemento HTML. Veja em exemplo:

• background-color: rgb(125, 20, 20);

• background-color: green;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Color</title>
<style>
.container{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
width:200px;
height: 200px;
margin:10px;
}
.background-rgb{
background-color: rgb(86, 121, 80);
}
.background-rgba{
background-color: rgba(86,121,80,0.74);
}
.background-hsl{
background-color: hsl(111, 20%, 39%);
}
.background-hsla{
background-color: hsla(111, 20%, 39%, 0.74);
}
.background-hexa{
background-color: #567950;
}
.background-hexa-transparent{
background-color: #567950AB;
}
.background-transparent{
border:1px solid green;
background-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="box background-rgb">Cor de fundo com
função rgb()</div>
<div class="box background-rgba">Cor de fundo com
transparência e função rgba()</div>
<div class="box background-hsl">Cor de fundo com
função hsl()</div>
<div class="box background-rgba">Cor de fundo com
transparência e função hsla()</div>
<div class="box background-hexa">Cor de fundo
hexadecimal</div>
<div class="box background-hexa-transparent">Cor de
fundo hexadecimal com transparência</div>
<div class="box background-transparent">Background
transparente</div>
</div>
</body>
</html>