Esquinas redondeadas en una imagen rectangular utilizando solo CSS

Paso 5: Haga una imagen redondeada

Acceda a la imagen con la ayuda de "cifra"Y establece varias propiedades CSS mencionadas en el siguiente fragmento de código:

Aquí:

• "ancho" y "altura"Se utilizan para configurar el tamaño de la imagen.
• "Desbordamiento"La propiedad indica qué debería suceder si un cuadro para un elemento está desbordado. Para hacerlo, el valor de este atributo se establece como " oculto".
• "margen"Define el espacio alrededor del límite del elemento.
• "radio fronterizo"Denota el radio de la esquina del elemento. Para ese propósito, el valor se establece como "50%"Para hacer que el borde redondee.

Producción

Paso 6: Aplicar el estilo en el subtítulo

Acceda a la clase utilizando el ".subtítulo”Y aplique las siguientes propiedades de CSS:

De acuerdo con el fragmento de código dado anteriormente:

• "margen"Determina el espacio fuera del límite.
• "borde"Define un límite fuera del elemento.
• "texto alineado"Propiedad utilizada para establecer la alineación del texto.
• "color de fondo"La propiedad indica el color de la parte posterior del elemento.

Producción

Se trata de hacer la esquina redondeada en una imagen rectangular usando CSS.

Conclusión

Para hacer las esquinas redondeadas en una imagen rectangular, primero, agregue la imagen con la ayuda del "" etiqueta. Luego, acceda a la imagen y aplique el "radio fronterizo"Propiedad CSS con el valor"50%"Eso redondea el borde de la imagen. Además, establezca el "Desbordamiento" como "oculto". Esta publicación ha explicado el método para hacer esquinas redondeadas en imágenes rectangulares utilizando solo CSS.