El estilo es una parte importante del desarrollo del sitio web HTML, y CSS proporciona diferentes estilos para elementos HTML; Uno de ellos es crear un borde alrededor de cualquier elemento. Principalmente se utiliza para diferenciar entre secciones utilizando formas de borde, como sólidos, discontinuos, punteados y dobles.

El propósito de este manual es explicar cómo crear fronteras de esquina redonda. Para esto, primero, debemos saber sobre el "borde" propiedad. Vamos a empezar!

¿Qué es la propiedad "fronteriza" en CSS??

Para crear un borde alrededor de un elemento, debe usar el "borde" propiedad. Al usar esta propiedad, puede establecer el "estilo","color", y "ancho"De la frontera.

Sintaxis

La sintaxis de la propiedad fronteriza se da como:

Border: color de estilo ancho

Aquí está la descripción de los valores anteriores:

• ancho: Se usa para establecer el ancho del borde.
• estilo: Se usa para establecer el estilo de borde, como punteado, discontinuo, sólido o doble.
• color: Determina el color del borde.

Aquí hay un ejemplo en el que implementamos el "borde" propiedad.

Cómo crear borde usando CSS?

Para crear un borde, primero, agregue un elemento en un archivo HTML. Para hacerlo, crearemos un y asignaremos un "esquina"Clase para ello. Después de eso, agregaremos un encabezado y un párrafo usando

y

Etiquetas:

Pista de Linux

Esquinas redondas en CSS

A continuación, nos moveremos a la sección CSS.

Aquí el ".esquina"Se usa para acceder a la clase asignada a la . Después de eso, crearemos un borde usando el "borde"Propiedad y asigne los valores de ancho, estilo y color como"4px","sólido", y "RGB (248, 6, 107)", Respectivamente. Además, agregaremos el ancho "250px", altura "150px", Y color de fondo"RGB (234, 0, 255)"Para el Div:

.esquina
borde: 4px sólido RGB (248, 6, 107);
Ancho: 250px;
Altura: 150px;
Color de fondo: RGB (234, 0, 255);

Una vez que haya implementado el código mencionado anteriormente, vaya al archivo HTML y ejecútelo. Verá el siguiente resultado:

Ahora, nos moveremos a la siguiente parte, donde crearemos el borde cuadrado al borde de la esquina redonda.

Cómo redondear la esquina usando CSS?

Para crear un borde de la esquina redonda, el "radio fronterizoSe está utilizando la propiedad, en la que puede establecer el radio de la esquina de acuerdo con sus preferencias.

Sintaxis

La sintaxis de la propiedad fronteriza-radio se da a continuación:

Border-Radius: valor

Continuemos el ejemplo anterior y establezcamos el radio fronterizo para lograr esquinas redondas.

Ejemplo

En ".esquina"Clase del archivo CSS, establezca el valor de"radio fronterizo"Propiedad como"30px":

Radio fronterizo: 30px;

Con la línea anterior agregada, obtendrá la siguiente salida:

La salida dada anteriormente significa que los bordes se cambian con éxito a las esquinas redondas debido a la propiedad fronteriza-radio.

Conclusión

En CSS "radio fronterizoLa propiedad se utiliza para cambiar la esquina de los bordes. La forma de la curva cambia de acuerdo con el valor dado del radio. Usando la propiedad mencionada, puede establecer el radio de la esquina de acuerdo con su elección. En este artículo, hemos explicado cómo redondear las fronteras de la esquina utilizando la propiedad Border-Radius con la ayuda de un ejemplo.