Curso de CSS – Border ( Aula 6)

Nós aplicamos estilos há qualquer elemento que quisermos com essa propriedade, modificamos a espessura da borda, a cor e o estilo, com CSS nós podemos também aplicar estilos diferentes para cada uma das quatro bordas.

Não deixe de ler a aula passada que fala sobre toda parte tipográfica de seu site, utilizando a propriedade font.

Índice:Css básico

Veja meus tweets

[twitter username="felipebandeiras" count="4"]

Siga-me no Twitter

Propriedade	Valores
`border-top-width` `border-right-width` `border-bottom-width` `border-left-width`	thin medium thick <tamanho>: Referente à unidades de tamanho ex. px, em, %
`border-width`	thin medium thick <tamanho>: Referente à unidades de tamanho ex. px, em, % <espessura top> <espessura right> <espessura bottom> <espessura left>
`border-top-color` `border-right-color` `border-bottom-color` `border-left-color`	<cor>: Referente a valores de cores ex. #000, rgb(255,235,0), black transparent
`border-color`	<cor>: Referente a valores de cores ex. #000, rgb(255,235,0), black transparent <cor top> <cor right> <cor bottom> <cor left>
`border-top-style` `border-right-style` `border-bottom-style` `border-left-style`	none hidden dotted dashed solid double groove ridge inset outset
`border-style`	none hidden dotted dashed solid double groove ridge inset outset <estilo top> <estilo right> <estilo bottom> <estilo left>
`border-top` `border-right` `border-bottom` `border-left`	<espessura top> <estilo top> <cor top> <espessura right> <estilo right> <cor right> <espessura bottom> <estilo bottom> <cor bottom> <espessura left> <estilo left> <cor left>
`border`	<espessura p/ todas as bordas> <estilos p/ todas as bordas> <cor p/ todas as bordas

Propriedade border-width e suas variáveis

Utilizamos a propriedade border-width para específicar a espessura da borda no elemento.

Todo elemento tem quatro bordas que são top (superior), right (direita), bottom ( inferior) e left (esquerda). Nós podemos aplicar espessura a cada uma das bordas utilizando as seguintes propriedades:

border-top-width
border-right-width
border-bottom-width
border-left-width

Fonte: w3c.br/

Valores
thin medium thick <tamanho>

Nós podemos atribuir quatro tipos de valores o valor thin tem uma espessura fina, o valor medium tem uma espessura média, o valor thick tem uma espessura grossa e o valor <tamanho> é referente à unidades de tamanho por exemplo 10px, 50%, 20cm e etc.

Veja mais sobre unidades de tamanho.

Exemplo – Utilizando border-width

Neste exemplo aplicamos em cada lado do elemento uma espessura diferente na borda.

#seletor{
border-top-width:medium;
border-right-width:thin;
border-bottom-width:thick;
border-left-width: 20px;
border-style:solid;
}

Propriedade border-color e suas variáveis

Border-color é utilizada para modificar as cores da borda de um elemento, o uso dessa propriedade é bastante simples.

Sintaxe:

#seletor{
border-color:[cor];
}

Ainda podemos modificar a cor de cada lado de um elemento, deixando uma diferente da outra, utilizamos essa sintaxe.

#seletor{
border-color:[cor top] [cor right] [cor bottom] [cor left];
}

Onde está [cor], coloca-se o valor em hexadecimal, RGB, ou o nome da cor em inglês.

Veja um exemplo utilizando border-color

Neste exemplo utilizamos uma cor diferente para cada borda e espessuras diferentes para cada lado do elemento.

#exemplo{
border-color:#000 #090 #F00 #FF0;
border-top-width:medium;
border-right-width:thin;
border-bottom-width:thick;
border-left-width: 20px;
}

FAQ

O que é um seletor?

É o nome de um grupo de elemento atribuido à uma id ou class

O que é linguagem de marcação?

São códigos aplicados à um texto, trazendo informações sobre ele.

Mais informações:

Noção básica de hexadecimal e RGB

Em CSS nós atribuímos códigos hexadecimais e RGB para aplicar cores.

Mais informações:

Propriedade border-style – dê estilos a suas bordas

Existem oito tipos de estilos diferentes para bordas e para modificarmos usamos a propriedade border-style, são onze valores possíveis para border-style sendo:

Valores

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
<estilo top> <estilo right> <estilo bottom> <estilo left>

É muito fácil entender a sintaxe, onde estiver [estilo], basta trocar pelos valores da tabela ao lado

Sintaxe:

#seletor{
border-style:[estilo];
}

Ainda podemos modificar o estilo de cada lado de um elemento, deixando uma borda diferente da outra, utilizamos essa sintaxe.

#seletor{
border-color:[estilo top] [estilo right] [estilo bottom] [estilo left];
}

Curso de CSS – Border ( Aula 6)

Índice:Css básico

Veja meus tweets

Propriedade

Valores

Propriedade border-width e suas variáveis

Valores

Exemplo – Utilizando border-width

Propriedade border-color e suas variáveis

Veja um exemplo utilizando border-color

FAQ

Propriedade border-style – dê estilos a suas bordas

Valores

Uma resposta para Curso de CSS – Border ( Aula 6)

Deixe uma resposta