Artigos CSS CSS3 Border: Trabalhando com bordas em CSS3

CSS Border: Propriedades border-radius, box-shadow e border-image

Olá pessoal, no artigo de hoje iremos ver algumas das propriedades das CSS3 para se trabalhar com as bordas de certos elementos. Ao final desse artigo, o leitor deverá compreender e estar apto a utilizar as propriedades border-radius, box-shadow e border-image, inseridas na versão 3 das CSS.

Muita gente ainda não sabe que é possível criar box's com cantos arredondados, utilizar efeitos de sombreados sem usar nenhum tipo de imagem, com apenas CSS3. Também é possível pegar uma linda borda feita no seu editor de imagem preferido, como o Photoshop, e usá-la em seu site como borda de alguma coisa.

Até o lançamento desta última versão das folhas de estilo, aplicar efeitos um pouco mais detalhados nas bordas dos elementos era uma tarefa consideravelmente cansativa e improdutiva. Por exemplo, para se obter um elemento com bordas arredondadas, era necessário criar várias imagens para dispô-las em cada canto do elemento. Um exemplo ilustrativo disso é mostrado na Figura 1.

Esquema de bordas arredondadas com imagens
Figura 1: Esquema de bordas arredondadas com imagens

No exemplo acima, como vemos, seriam necessárias oito imagens para formar as bordas do elemento central.

Como veremos a seguir, a propriedade border-radius permite fazer a mesma coisa de forma mais prática e principalmente mais correta. Utilizando CSS, não serão necessárias requisições ao servidor para obter imagens para formar o layout do elemento.

border-radius

De nome sugestivo, esta propriedade define uma borda arredondada de acordo com o valor fornecido, que indica o raio de uma circunferência teoricamente posicionada nos vértices do elemento e a partir da qual se obtém o efeito desejado. Posta desta forma a definição pode ser um pouco complicada, mas veremos a ideia ilustrada nas figuras a seguir, facilitando o entendimento.

Primeiramente é necessário compreender o conceito de raio da circunferência, que pode ser definido como um segmento de reta que liga o centro desta até sua borda. Como a circunferência é uma figura simétrica nas duas dimensões, pode-se afirmar que qualquer segmento de reta que ligue seu centro a sua borda terá o mesmo comprimento, o qual será igual ao raio. A Figura 2 ilustra o conceito de raio.

Raio de uma circunferência
Figura 2: Raio de uma circunferência

De que forma isso se aplica à definição da borda arredondada com CSS? Suponha que definimos a propriedade border-radius de uma div igual a 25px. O desenho da borda é feito através do posicionamento de uma circunferência de raio igual a 25px nas extremindades superiores e inferiores direita e esquerda da div, conforme mostra a Figura 3.

Circunferências base para a borda arredondada
Figura 3: Circunferências base para a borda arredondada

O resultado final seria, então, o exibido na Figura 4.

Elemento com bordas arredondadas
Figura 4: Elemento com bordas arredondadas

É claro que no dia-a-dia não nos atemos a fazer toda essa análise gráfica, porém, é importante saber exatamente o que estamos fazendo quando utilizamos um certo recurso.

A propriedade border-radius pode ser definida de duas formas: definindo um valor único para todos os vértices (pontas) ou especificando individualmente o valor de cada vértice. As listagens a seguir exemplificam o uso de cada uma destas formas.

Listagem 1: Definição de border-radius geral.

<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
  <style type="text/css">
  #div1{
    width:100px;
    height:100px;
    border:solid 1px;
    border-radius:20px;
  }
  </style>
</head>
<body>
  <div id="div1"/>      
</body>
</html>

Listagem 2: Definição de border-radius individual.

<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
  <style type="text/css">
  #div1{
    width:100px;
    height:100px;
    border:solid 1px;
    border-radius:0px 20px 0px 20px;
  }
  </style>
</head>
<body>
  <div id="div1"/>      
</body>
</html>

Os resultados são mostrados na Figura 5.

Exemplos de uso do border-radius
Figura 5: Exemplos de uso do border-radius.

Na definição de valores individuais, a ordem dos vértices é a seguinte:

  1. Superior esquerdo
  2. Superior direito
  3. Inferior direito
  4. Inferior esquerdo

Saiba mais: CSS: border-radius

Bastante simples, não é mesmo? E temos a boa notícia de que esta propriedade é suportada por todos os principais browsers da atualidade.

box-shadow

Outro efeito que há algum tempo necessitava de algumas imagens para ser obtido é o de sombreamento. Esta propriedade é composta por alguns parâmetros e sua sintaxe de uso é a seguinte:

box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow: posição horizontal da sombra.
  • v-shadow: posição vertical da sombra.
  • blur: define a intensidade do efeito blur (borrão) da sombra (opcional).
  • spread: o tamanho da sombra (opcional).
  • color: a cor da sombra.
  • inset: define se a sombra é externa (padrão) ou interna (inset).

A Listagem 3 mostra um exemplo de uso do box-shadow e posteriormente o resultado do mesmo.

Listagem 3: Exemplo de uso do box-shadow.

<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
  <style type="text/css">
  #div1{
    width:100px;
    height:100px;
    border:solid 1px;
    box-shadow: 10px 10px 10px 5px black;
  }
  </style>
</head>
<body>
  <div id="div1"/>      
</body>
</html>
Div com box-shadow definida
Figura 6: Div com box-shadow definida

Esta propriedade também é suportada pelos principais browsers

border-image

A última porém não menos importante propriedade que veremos é a border-image, que permite definir uma imagem para ser usada no preenchimento da borda de um elemento.

Infelizmente esta propriedade não é suportada pelo Internet Explorer e requer o uso de prefixos para os diferentes browsers, como veremos na Listagem 4.

Listagem 4: Exemplo de uso do border-image.

<html>
<head>
<title>Trabalhando com Bordas em CSS3</title>
  <style type="text/css">
  #div1{
    width:100px;
    height:100px;
    border-width:10px;
    border-image:url(border.png) 30 30 repeat;
    -moz-border-image:url(border.png) 30 30 repeat; /* Firefox */
    -webkit-border-image:url(border.png) 30 30 repeat; /* Safari e Chrome */
    -o-border-image:url(border.png) 30 30 repeat; /* Opera */
  }
  </style>
</head>
<body>
  <div id="div1"/>      
</body>
</html>

Os parâmetros utilizados definem o caminho da imagem, as dimensões da borda e o estilo, que pode ser strech ou repeat. O primeiro estilo “estica” a imagem, preenchendo todo o elemento de uma única vez, enquanto o segundo repete a imagem até preencher toda a borda, como pode ser visto na Figura 7.

Border-image stretch e repeat
Figura 7: border-image stretch e repeat
<

Conclusão

Mais uma vez as CSS tornaram possíveis, e de forma simples, resultados que antes só eram obtidos a partir do uso de imagens e uma quantidade considerável de código, facilitando o trabalho dos web designers.

Espero que tenham gostado e até o próximo artigo.