CSS Butine Border Radius

Es posible que haya escuchado y utilizado la propiedad fronteriza en el estilo CSS mientras prepara los archivos HTML para crear un borde resaltado alrededor de algunos elementos alrededor de los encabezados, mesas y párrafos. Cuando agrega un borde a cualquier elemento, puede diseñarlo de diferentes maneras: crear un borde sólido, punteado y discontinuo, o delinearlo también. La propiedad de Radius fronteriza le permite diseñar las esquinas de un borde. Dentro de esta guía, discutiremos diferentes ejemplos para diseñar las esquinas de borde utilizando el esquema y la propiedad de radios fronterizos.

Ejemplo 01:

Comencemos con el ejemplo más básico de fronteras. En este ejemplo, demostraremos el uso de la propiedad fronteriza para crear un borde simple alrededor de un elemento utilizado dentro del código HTML. El código HTML se ha iniciado con la etiqueta DocType "HTML" que se cerrará al final del programa HTML. Después de la etiqueta HTML, hemos estado usando la etiqueta "Cabeza" y la etiqueta del cuerpo. La etiqueta "Cabeza" utilizará la etiqueta de estilo para diseñar nuestra página web.

Dentro de la etiqueta del cuerpo, hemos estado usando el encabezado "H1" que será del tamaño más grande en los encabezados HTML. Este encabezado contiene solo dos palabras, "radio fronterizo". Dentro de la etiqueta de estilo, estamos utilizando el encabezado H1 para peinarlo un poco. Dentro de los soportes rizados, hemos estado utilizando la propiedad "borde" para crear un borde alrededor del encabezado. Hemos especificado el ancho del borde como 3 píxeles sólidos y estará rojo. El estilo y la etiqueta de la cabeza están cerrados aquí. Guardemos y ejecutemos este script HTML en el código de Visual Studio y lo abramos dentro de Google Chrome.

Después de la ejecución del código HTML en el código de Visual Studio, la página web HTML se ha abierto en el navegador Chrome como se muestra a continuación. Esta página se ha mostrado con el encabezado 1 "Estado del borde" con su borde rojo. Este borde es de ancho 3 píxeles y es rojo sólido.

Hasta que aún, no habíamos discutido el radio fronterizo en nuestra ilustración anterior del código HTML. Entonces, hemos estado usando un total de 4 encabezados con diferentes títulos. Como todos los encabezados son encabezados de tamaño 1, necesitamos diferenciarlos con clases. Hemos estado especificando nombres de clase separados para los encabezados, "A", "B", "C" y "D". Dentro de la etiqueta de estilo de una etiqueta de cabeza, las clases se definen para diseñar por separado los dos encabezados. Aunque hemos estado diseñando los dos encabezados de manera muy similar, es necesario hacerlo por separado y no mezclarlos. Hemos estado creando un borde alrededor del primer encabezado con un color rojo sólido y será de ancho 3 píxeles.

Se ha utilizado la misma propiedad "fronteriza" para los otros tres encabezados que contienen clases "B", "C" y "D". El único cambio es el color azul sólido, el color verde sólido y el color de orquídea sólida en lugar de color rojo para el resto de los encabezados. Después de agregar el borde de 3 píxeles alrededor de todos los encabezados, es hora de agregar un radio al borde. Hemos estado utilizando la propiedad Border-Radius para agregar un borde de 25 píxeles al encabezado 1. Este valor único para la propiedad fronteriza-radio se mancharía a las 4 esquinas de un borde por igual.

Después de esto, hemos estado utilizando dos valores para la propiedad "Border-Radius". Hemos aplicado estos valores para encabezar tres: el primer valor para la esquina superior izquierda, el segundo para la esquina superior derecha e inferior izquierda y el tercer valor para la esquina inferior derecha. El último estilo para el encabezado 4 contiene 4 valores para la propiedad de radio fronterizo: superior izquierda, superior derecha, abajo a la izquierda e inferior derecha respectivamente. Guardemos y ejecutemos este código.

Con el uso de diferentes valores para el radio fronterizo, tenemos los encabezados alterados en la página web que se muestran a continuación. El uso de la propiedad de radio fronterizo con 25 píxeles ha estado haciendo la curva de radio fronterizo desde todos los lados para encabezar 1. Después de eso, el uso de la propiedad de Radius de borde con 2 valores ha mostrado una curva más contorno para las esquinas superior izquierda e inferior derecha en comparación con las esquinas superior derecha e inferior izquierda en el encabezado 2. El uso de tres valores para encabezar tres muestra el cambio de borde de contorno claro en las esquinas superior derecha e inferior izquierda en comparación con otros lados. El último encabezado ha estado mostrando el cambio en todas las esquinas.

Ejemplo 02:

Es hora de crear un contorno para un borde junto con curvas en sus esquinas. Entonces, hemos estado usando un total de 3 encabezados dentro de la etiqueta "cuerpo" de una etiqueta HTML. Los encabezados se inicializan con la etiqueta de encabezado "H1". El mayor tamaño de tamaño que se producirá en la página web. Los tres encabezados se especifican con tres clases diferentes: A, B y C. Estas clases se utilizarán en la etiqueta de estilo para diseñar los encabezados de manera diferente.

Entonces, dentro de la etiqueta de estilo de una etiqueta de "cabeza" en el archivo HTML, hemos estado especificando los encabezados junto con sus clases para diseñarlos por separado. Hemos estado utilizando la propiedad Border-Radius para los tres encabezados, mientras que el radio se ha establecido en diferentes valores para los tres encabezados: 10px, 25px y 50px. El relleno y el ancho de los tres encabezados se han especificado con los mismos valores, 10px y 500px respectivamente. Hemos estado utilizando la propiedad de altura para los dos primeros encabezados, 40px cada uno. Hemos estado estableciendo la propiedad de fondo para el primer título, fondo de color verde.

La propiedad fronteriza se ha utilizado para el segundo y tercer rumbo para especificar el grosor del borde, 5px. Su estilo es sólido y el color de un borde a generar. La propiedad de esquema para los bordes solo se ha utilizado en el tercer encabezado creando un contorno punteado de 5 px de espesor. Guardemos y compilemos este código para ver los cambios.

La salida de este código HTML ha mostrado el primer encabezado, una pequeña curva leve desde las esquinas sin borde delgado y lleno de color verde. El borde púrpura del encabezado 2 es más curvado y el encabezado 3 contiene un borde con un contorno azulado punteado.

Conclusión:

Esta guía está demostrando el uso de fronteras en códigos HTML junto con sus otras propiedades como Border-Madius y Butine. Hemos discutido los ejemplos de HTML para diseñar las curvas de un borde con la ayuda de una propiedad de radio fronterizo. Junto con eso, hemos visto cómo podemos llenar los bordes de elementos específicos con la propiedad de fondo y crear contornos fuera de la frontera utilizando la propiedad de esquema. A lo largo de estos ejemplos, el uso del ancho, la altura y las propiedades de relleno fue muy beneficioso para ser utilizado en el código.