Video: Bordas Arredondadas - Curso CSS e Dreamweaver - Parte 6

Tempo: 13 min 

Resumo: Vamos voltar as propriedades de bordas implementadas pelas especificações da CSS3. Mesmo que haja diferenças entre os browsers, ainda assim podemos começar a nos acostumarmos com estas novas propriedades. Nesta aula vamos tratar da propriedade border-radius que é a responsável por arredondar as bordas (ou os cantos) de um elemento. Aprederemos desde sua sintaxe mais básica até o arredondamento individual de cada aresta de nosso elemento deixando as mesmas com formatos e valores diferentes. Vamos aprender, também, como deixar o elemento com as bordas arredondadas e ao mesmo tempo com sombra.

Metodologia de desenvolvimento do exemplo: CSS define a forma como os elementos são apresentados na tela. CSS não é necessariamente uma linguagem de programação, mas sim uma especificação criada pela W3C e, através desta especificação, conseguimos definir as propriedades visuais de diversos elementos, inclusive sendo esta uma boa prática de desenvolvimento. CSS3 estende essa especificação  criando novas propriedades e trazendo maior facilidade de desenvolvimento para sites e sistemas, mas, estas novas propriedades, no momento, não são suportadas por todos os browsers do mercado.

 

Tecnologias utilizadas: CSS3 e Adobe Dreamweaver CS4 

Exemplos construídos: Criação de página contendo dois elementos com bordas arredondadas de forma diferente e contendo sombra.

Palavras-chave: CSS3, classes, arredondamento, arredondar os cantos, border-radius