Bordes redondos de CSS
Ejemplo # 01:
Redondeemos los bordes de cualquier imagen o algunos párrafos. Hemos comenzado el código HTML con el uso de la etiqueta básica HTML seguida de la etiqueta de cabeza. La etiqueta de cabeza contiene la etiqueta de título que se ha utilizado para dar un título a la página web como "bordes o esquinas redondeados CSS". Dentro de la etiqueta del cuerpo del documento HTML, hemos estado utilizando un encabezado de tamaño 1 que no se usará para redondear las esquinas. Se han utilizado tres párrafos mediante la utilización de la etiqueta del párrafo "P".
Los dos primeros párrafos se han especificado con 2 clases diferentes: A y B. El tercer párrafo se ha especificado con la ID "C". Todos estos tres párrafos contienen oraciones que podrían usarse como contenido del párrafo. Estos párrafos se pueden mostrar con bordes redondeados en la página HTML. Echemos un vistazo al CSS de esta página. Dentro de la etiqueta de estilo de este script HTML, hemos especificado las clases A y B para que los dos primeros párrafos se diseñen por separado, mientras que la ID "C" se usa con el signo hash para diseñar por separado.
Hemos estado utilizando la propiedad de radio fronterizo para la primera clase "a" para agregar el radio de 25 píxeles y el fondo sería coloreado, azul cielo. La propiedad del radio de borde también se ha utilizado para la segunda clase para agregar el radio de borde de 45 píxeles con dos píxeles de borde sólido a su alrededor. Para las dos primeras clases hemos estado usando el ancho de 200 píxeles de 200 píxeles y la altura de 50 píxeles. Por otro lado, la tercera identificación del párrafo se ha utilizado para agregar el radio de 90 píxeles a su alrededor.
Usando la propiedad de fondo, se ha agregado una imagen como fondo. Junto con eso, la propiedad de la posición de fondo se ha utilizado para colocar el fondo de una imagen y la propiedad de repetición de fondo se ha configurado para repetir. Debido al uso de esta propiedad, la imagen de fondo se puede repetir tantas veces como sea posible. El relleno, la altura y el ancho se citarían de la misma manera, como lo usamos en los dos estilos anteriores para los párrafos. El código ya se completa y podemos ejecutarlo en el código de Visual Studio a través del menú "Ejecutar" de su barra de tareas seguida de la opción "Iniciar depuración".
La salida de este código HTML se ha mostrado en el navegador Chrome como se muestra a continuación. Los dos primeros párrafos se han diseñado dentro del radio fronterizo de 25 píxeles y 45 píxeles respectivamente. Ambos párrafos contienen diferentes fondos con el mismo relleno, ancho y altura. Puedes ver que los bordes del radio del párrafo se han redondeado.
Además, el tercer párrafo se ha mostrado dentro del radio del círculo de 90 píxeles, mientras que la imagen utilizada como fondo se ha repetido muchas veces.
Ejemplo # 2:
Tenemos que inicializar este ejemplo con la etiqueta HTML principal y la etiqueta de cabeza. La etiqueta del título se ha utilizado para dar el título de esta página HTML como "bordes o esquinas redondeados de CSS". Mientras echamos un vistazo a la etiqueta del cuerpo de este script HTML, encontramos un solo rumbo de tamaño 1 con un título de texto simple en él. Esta página HTML contiene un total de 5 párrafos con el uso de etiquetas o elementos de párrafo. El primer párrafo muestra que esto contendrá un radio de borde de 50 píxeles y la forma del eclipse se formaría.
El segundo párrafo no es usar nada más que una identificación "Eclipse". Todos los otros tres párrafos contienen sus propias clases especificadas: cuatro, tres y dos, junto con algunas oraciones que muestran los valores de radio fronterizo utilizados para la creación de diferentes eclipses para párrafos particulares. Estos párrafos mostrarían el número total de esquinas que se están redondeando. La identificación de "eclipse" para el primer párrafo se ha utilizado para diseñar el primer párrafo en un eclipse. Hemos estado especificando el radio de borde del 50%, fondo de color verde amarillo, acolchado de 10 píxeles, el ancho de 110 píxeles y la altura de 50 píxeles para el primer párrafo. Luego, hemos estado usando la clase del tercer párrafo, "cuatro", para redondear las cuatro esquinas del párrafo. Para esto, hemos estado utilizando la propiedad de radio fronterizo para los bordes superior, inferior, izquierda y derecho del párrafo. Hemos especificado el fondo como Burlywood, con relleno de 15 píxeles, un ancho de 200 píxeles y una altura de 40 píxeles.
Esto significa que las cuatro esquinas o bordes del tercer párrafo se redondearían. Para que el cuarto párrafo sea diseñado por la clase "tres", tres de sus esquinas o bordes se redondearían mientras que el uno se dejaría sin cambios. El fondo se ha especificado como oro, mientras que el relleno, el ancho y la altura serían los mismos que hemos usado para el tercer párrafo. Hemos estado usando la clase "dos" para que el quinto párrafo redondee sus dos esquinas. El mismo relleno, ancho y altura se usaría, mientras que el color sería diferente para este párrafo. El primer párrafo no mostraría ningún bordes redondeados porque no contiene ningún estilo para ello. Guardemos este script HTML y lo ejecutemos con el código Visual Studio a través de la opción de depuración de inicio.
La salida de este programa HTML ha demostrado que el primer párrafo no contiene ningún bordes redondeados porque hemos perdido el estilo de este párrafo. Por otro lado, los cuatro párrafos han sido diseñados y tenemos bordes redondeados para todos estos.
Conclusión
Esto se trata del uso de la propiedad Radius fronteriza para redondear los bordes de cualquier elemento HTML dentro del script HTML. Para este propósito, hemos utilizado los ejemplos HTML de una manera muy simple y exquisita. Con el primer ejemplo, hemos demostrado el uso de la propiedad Radius del borde para redondear todos los bordes de un elemento o imagen a la vez sin especificar los bordes. Por otro lado, dentro del segundo ejemplo, hemos especificado el uso de diferentes esquinas o bordes para redondear estos bordes o esquinas en consecuencia mediante el uso de diferentes valores.