Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS

Como criar bordas arredondadas em CSS usando a propriedade border-radius

Quantidade de visualizações: 766 vezes

Nesta dica mostrarei como podemos criar uma DIV com cantos arredondados usando a propriedade border-radius do CSS. A técnica de deixar uma borda redonda no CSS está sendo usada em muitos sites, razão pela qual você deverá dominá-la também.

A propriedade border-radius nos permite definir o raio de arredondamento dos quatro cantos de um elemento HTML, em geral elementos DIV e imagens.

Veja uma página HTML completa na qual temos uma DIV com cantos arredondados e uma borda de 1px para que o efeito seja melhor visualizado:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)

Note que border-radius é uma forma reduzida das quatro propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius. Podemos usar essas propriedades individualmente ou usar a forma abrevida.

Experimente, por exemplo, a seguinte combinação de valores para a propriedade border-radius:

Note o efeito interessante que é gerado nas bordas da DIV.

Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de CSS

Como criar uma DIV redonda e alinhar o seu conteúdo ao centro usando as propriedades display, border-radius, justify-content e align-items do CSS

Como centralizar uma DIV na vertical e na horizontal usando as propriedades position, top, left e transform do CSS

Como definir a cor de fundo de um elemento usando nomes de cores

Como definir a cor de fundo de um elemento usando um valor hexadecimal

Como definir uma imagem de fundo que se repete apenas verticalmente usando a propriedade background-repeat do CSS

CSS3 - O que são CSS media queries e como usá-las em suas páginas web para criar designs responsivos

Como definir uma imagem de fundo para a página HTML em CSS usando a propriedade background-image

Como criar uma barra de navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSS

Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade display

Como criar uma tela de login usando HTML, CSS e JavaScript - Responsivo e com opção de exibir/ocultar senha

Dicas e truques de outras linguagens

PHP - Como calcular o comprimento da hipotenusa em PHP dadas as medidas do cateto oposto e do cateto adjascente

Java - Exercícios Resolvidos de Java - Laços - Faça um programa para calcular o valor das seguintes expressões

C# - Como testar se uma string é null ou vazia em C# usando a função IsNullOrEmpty() da classe String

Python - Como contar quantas vezes um elemento aparece em uma lista do Python usando a função count()

Delphi - Como retornar o caractere a partir de um determinado código ASCII em Delphi usando a função Chr()

Python - Como calcular o centroide ou centro de gravidade de um triângulo em Python

jQuery - jQuery para iniciantes - Como obter o conteúdo de um elemento HTML usando a função html() do jQuery

Delphi - Como retornar a hora atual em Delphi usando as funções Time(), GetTime() e TimeToStr()

C# - C# para iniciantes - Qual a diferença entre string e String?

Java - Java Swing para iniciantes - Como usar o método getKeyCode() da classe KeyEvent para detectar qual tecla de direção (setas) foi pressionada

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas

Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas

Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS

Como criar bordas arredondadas em CSS usando a propriedade border-radius

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90