Cantos arredondados em imagem retangular usando apenas CSS

Etapa 5: Torne a imagem arredondada

Acesse a imagem com a ajuda de “figura”E defina várias propriedades CSS mencionadas no snippet de código abaixo:

Aqui:

• ““largura" e "altura”São usados ​​para definir o tamanho da imagem.
• ““transbordarA propriedade indica o que deve acontecer se uma caixa para um elemento estiver transbordada. Para fazer isso, o valor deste atributo é definido como “ escondido”.
• ““margem”Define o espaço ao redor do limite do elemento.
• ““Radio de fronteira”Denota o raio do canto do elemento. Para esse fim, o valor é definido como “50%”Para tornar a fronteira arredondada.

Saída

Etapa 6: aplique o estilo na legenda

Acesse a aula utilizando o “.rubrica”E aplique as seguintes propriedades CSS:

De acordo com o trenó de código acima:

• ““margem”Determina o espaço fora do limite.
• ““fronteira”Define um limite fora do elemento.
• ““alinhamento de texto”Propriedade utilizada para definir o alinhamento do texto.
• ““cor de fundo”Propriedade indica a cor da parte traseira do elemento.

Saída

Isso se trata de fazer o canto arredondado em uma imagem retangular usando CSS.

Conclusão

Para fazer os cantos arredondados em uma imagem retangular, primeiro, adicione a imagem com a ajuda do “" marcação. Em seguida, acesse a imagem e aplique o “Radio de fronteira”Propriedade CSS com o valor“50%”Isso arredonda a borda da imagem. Além disso, defina o “transbordar" como "escondido”. Este post explicou o método para fazer cantos arredondados em imagens retangulares usando apenas CSS.