Bordas redondas do CSS
Exemplo # 01:
Vamos arredondar as bordas de todas as imagens ou alguns parágrafos. Iniciamos o código HTML com o uso da tag Basic HTML seguida pela etiqueta da cabeça. A tag principal contém a etiqueta de título que foi usada para dar um título à página da web como “bordas ou cantos arredondados de CSS”. Dentro da etiqueta corporal do documento HTML, usamos um título de tamanho 1 que não será usado para arredondar os cantos. Três parágrafos foram usados pela utilização da tag de parágrafo "P".
Os dois primeiros parágrafos foram especificados com 2 classes diferentes: A e B. O terceiro parágrafo foi especificado com o ID "C". Todos esses três parágrafos contêm frases que podem ser usadas como conteúdo do parágrafo. Esses parágrafos podem ser exibidos com bordas arredondadas na página HTML. Vamos dar uma olhada no CSS desta página. Dentro da etiqueta de estilo deste script HTML, especificamos as classes A e B para os dois primeiros parágrafos para estilizar separadamente os dois enquanto o ID “C” está sendo usado com o sinal de hash a ser estilizado separadamente.
Usamos a propriedade Radius da borda para a primeira classe “A” para adicionar o raio de 25 pixels e o fundo seria colorido, azul -céu. A propriedade do raio da borda também foi usada para a segunda classe para adicionar o raio da borda de 45 pixels com dois pixels de borda sólida ao redor. Nas duas primeiras aulas, usamos a largura de 200 pixels de 20 pixels e a altura de 50 pixels. Por outro lado, o terceiro ID do parágrafo foi usado para adicionar o raio de 90 pixels ao seu redor.
Usando a propriedade em segundo plano, uma imagem foi adicionada como fundo. Junto com isso, a propriedade de posição de plano de fundo foi usada para posicionar o plano de fundo de uma imagem e a propriedade repetida em segundo plano foi definida para repetir. Devido ao uso dessa propriedade, a imagem de fundo pode ser repetida o maior número possível. O preenchimento, a altura e a largura seriam citados da mesma forma, como usamos nos dois estilos acima para parágrafos. O código agora está concluído e podemos executá -lo no código do Visual Studio através do menu "Run" de sua barra de tarefas seguida pela opção "Start Debugging".
A saída deste código HTML foi exibida no navegador Chrome como abaixo. Os dois primeiros parágrafos foram estilizados dentro do raio de borda de 25 pixels e 45 pixels, respectivamente. Ambos os parágrafos contêm origens diferentes com o mesmo preenchimento, largura e altura. Você pode ver que as bordas do raio do parágrafo foram arredondadas.
Além disso, o terceiro parágrafo foi exibido dentro do raio do círculo de 90 pixels, enquanto a imagem usada como fundo foi repetida muitas vezes.
Exemplo # 2:
Temos que inicializar este exemplo com a tag html principal e a tag de cabeça. A etiqueta do título foi usada para dar o título a esta página HTML como “bordas ou cantos arredondados do CSS”. Ao dar uma olhada na etiqueta corporal deste script html, encontramos um único título de tamanho 1 com um título de texto simples nele. Esta página HTML contém um total de 5 parágrafos com o uso de tags ou elementos de parágrafos. O primeiro parágrafo é mostrar que isso estará contendo um raio de borda de 50 pixels e a forma do eclipse será formada.
O segundo parágrafo está usando nada além de um ID "Eclipse". Todos os outros três parágrafos contêm suas próprias classes especificadas: quatro, três e dois, juntamente com algumas frases mostrando os valores do radiato de fronteira usados para a criação de diferentes eclipses para parágrafos específicos. Esses parágrafos mostrariam o número total de cantos que estão sendo arredondados. O ID "Eclipse" para o primeiro parágrafo foi usado para estilizar o primeiro parágrafo em um eclipse. Estamos especificando o raio da borda de 50%, fundo de cor verde amarela, estofamento de 10 pixels, largura de 110 pixels e altura de 50 pixels para o primeiro parágrafo. Em seguida, usamos a classe do terceiro parágrafo, "quatro", para arredondar os quatro cantos do parágrafo. Para isso, usamos a propriedade Radius da borda para as bordas superior, inferior, esquerda e direita do parágrafo. Especificamos o fundo como Burlywood, com preenchimento de 15 pixels, uma largura de 200 pixels e uma altura de 40 pixels.
Isso significa que todos os quatro cantos ou bordas do terceiro parágrafo seriam arredondados. Para que o quarto parágrafo seja estilizado pela classe “três”, três de seus cantos ou bordas seriam arredondados enquanto o único ficaria inalterado. O fundo foi especificado como ouro enquanto o preenchimento, a largura e a altura seriam os mesmos que usamos para o terceiro parágrafo. Usamos a classe “dois” para o quinto parágrafo para arredondar seus dois cantos. O mesmo preenchimento, largura e altura seriam usados enquanto a cor seria diferente para este parágrafo. O primeiro parágrafo não estaria exibindo nenhuma bordas arredondadas porque não contém nenhum estilo para isso. Vamos salvar este script HTML e executá -lo com código do Visual Studio por meio da opção Start Debugging.
A saída deste programa HTML tem mostrado que o primeiro parágrafo não contém bordas arredondadas porque perdemos o estilo deste parágrafo. Por outro lado, todos os quatro parágrafos foram denominados e temos bordas arredondadas para todas.
Conclusão
É tudo sobre o uso da propriedade Radius da borda para arredondar as bordas de qualquer elemento HTML dentro do script html. Para esse fim, utilizamos os exemplos HTML de uma maneira muito simples e requintada. Com o primeiro exemplo, demonstramos o uso da propriedade do raio da borda para arredondar todas as bordas de um elemento ou imagem de uma só vez, sem especificar as bordas. Por outro lado, dentro do segundo exemplo, especificamos o uso de diferentes cantos ou bordas para arredondar essas bordas ou cantos de acordo com o uso de valores diferentes.