Se pueden utilizar muchas formas en nuestra página web para crear un mejor diseño, como círculos, cuadrados, rectángulos y más. Estas formas se pueden crear utilizando varias propiedades CSS. Más específicamente, las esquinas redondeadas de la caja son más efectivas que las esquinas puntiagudas, ya que hacen que nuestros ojos sigan las líneas fácilmente.

Este artículo discutirá el procedimiento de utilizar la propiedad de Border-Radius de CSS para crear cajas con esquinas redondeadas.

Cómo crear cajas en HTML?

Para crear dos cuadros, agregue dos elementos DIV de clase con los nombres "caja-1" y "caja-2", y añadir

Elemento con el encabezado en cada uno de los elementos Div de la siguiente manera:

Caja de ejemplo 1

Box de ejemplo 2

Ahora, aplique estilos CSS a los elementos HTML.

Elemento de estilo H1

H1
relleno: 50px;

El

El elemento está provisto de la propiedad de relleno como "50px"Para crear el espacio adicional especificado dentro del encabezado.

Elementos de Div Box-1 y Box-2 Div

#Box-1,
#Box-2
Margen: 1px Auto;
Ancho: 250px;
Altura: 120px;
Color de fondo: chocolate;
tamaño de fuente: 10px;
Color: Ghostwhite;

Las propiedades CSS que se aplican al Box-1 y el Box-2 DIV se describen a continuación:

• "anchoLa propiedad establece la propiedad de ancho en 250px.
• "alturaLa propiedad se utiliza para la configuración de la altura del elemento a 250px.
• "color de fondoSe utiliza la propiedad para especificar el color de fondo del elemento.
• "tamaño de fuenteLa propiedad se utiliza para la configuración del tamaño de fuente del elemento.
• "colorLa propiedad se utiliza para la configuración del color de fuente.

Al proporcionar el código mencionado anteriormente, los cuadros creados se mostrarán de la siguiente manera:

Se puede observar que se crean cajas, pero sus esquinas aún son puntiagudas. La sección a continuación explicará el uso de la propiedad Border-Radius para hacer cajas con esquinas redondeadas.

¿Qué es la propiedad de Border-Radius de CSS??

El CSS "radio fronterizoSe utiliza la propiedad para definir el radio del elemento. Esta propiedad puede consistir en uno a cuatro valores. Estos valores se explican a continuación.

Sintaxis- un valor

Border-Radius: todos [ / todos];

Una sintaxis de valor se refiere al radio de las cuatro esquinas de la caja.

Sintax33- dos valores

Border-Radius: superior izquierda e inferior derecha superior e inferior izquierda
[ / Top-Left & Bottom-Right Top-Right e inferior izquierda];

Dos valores de sintaxis especifican el radio ya que el primer valor indica el radio en las esquinas superior izquierda e inferior derecha, y el segundo valor especifica el radio en las esquinas de la derecha superior e inferior izquierda.

Sintaxis- tres valores

Border-Radius: superior izquierda, la derecha superior e inferior izquierda, la derecha inferior
[ / Top-Left top-derecho e inferior izquierdo inferior derecha];

La sintaxis de tres valores especifica que el primer valor representa la esquina superior izquierda, el segundo valor indica las esquinas de la derecha superior e inferior izquierda y el tercer valor se aplica a la esquina inferior derecha.

Sintaxis- cuatro valores

Border-Radius: Top-izquierda superior a la derecha inferior inferior izquierda
[ / Top-Left Top-derecha de abajo derecha a la parte inferior izquierda];

La sintaxis de cuatro valores especifica que el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda.

Cómo crear cajas de esquina redondeadas usando CSS?

La sección de código a continuación explica cómo podemos crear cuadros de esquina redondos.

Caja de estilo-1

#Box-1
Color de fondo: RGB (255, 183, 0);
Border-Radius: 100px 2px 100px 1px;

El elemento Div Box-1 se aplica con propiedades que se describen a continuación:

• "color de fondoLa propiedad se utiliza para establecer el color de fondo del elemento.
• "radio fronterizo"Con el valor establecido como"100px 2px 100px 1px"Donde 100px indica la esquina superior izquierda, 2px indica la esquina superior derecha, 100px indica la esquina inferior derecha y 1px indica la esquina inferior izquierda.

Caja de estilo-2

#Box-2
Color de fondo: Darkcyan;
Radio fronterizo: 30px;

Las propiedades que se aplican al elemento Div Box-2 se describen a continuación:

• "color de fondo"La propiedad establece el color del elemento Div Box-2 con el"oscuro" color.
• "radio fronterizo"Propiedad con el valor establecido como"30px"Establece el radio de la caja a 30px de las cuatro esquinas.

Entonces, para cambiar las esquinas de la caja, los valores de la propiedad fronteriza-radio se pueden establecer en consecuencia. Al proporcionar las propiedades de estilo CSS anteriores a los elementos Div Box-1 y Box-2, el resultado se verá así:

Hemos aprendido con éxito la propiedad Border-Radius para hacer las esquinas redondas de cajas individuales o múltiples.

Conclusión

Para crear un mejor diseño para nuestra página web, se pueden utilizar diferentes formas, como círculos, cuadrados, rectángulos y más se pueden crear con CSS. Las cajas con esquinas redondeadas se pueden crear en CSS utilizando el CSS "radio fronterizo" propiedad. Este artículo demostró el uso de CSS Border-Radius para crear cajas con esquinas redondeadas con ejemplos.