Bordes CSS redondeados

Al trabajar en muchos sitios web y lenguajes de secuencias de comandos, es posible que haya pasado por muchas situaciones en las que encontró bordes redondeados o esquinas de algunos elementos o imágenes. Muchos desarrolladores y programadores diseñaron las imágenes o elementos de HTML para que sus páginas web fueran más estéticas y atractivas. El estilo HTML CSS también ha evolucionado estos conceptos. Nos proporciona la propiedad del radio del borde junto con varias propiedades de relleno, ancho y alto para redondear los bordes de algunos elementos. En este artículo, veremos las características que hacen que un sitio web sea más atractivo.

Ejemplo #01:

Redondeemos los bordes de imágenes o párrafos. Comenzamos el código HTML usando la etiqueta básica de HTML seguida de la etiqueta principal. La etiqueta de encabezado contiene la etiqueta de título que se usó para darle a la página web un título como "CSS bordes o esquinas redondeadas". Dentro de la etiqueta del cuerpo del documento HTML, usamos un encabezado de tamaño 1 que no se usa para redondear las esquinas. Se usaron tres párrafos usando la etiqueta de párrafo "p". Los dos primeros párrafos se especificaron con 2 clases diferentes: a y b. El tercer párrafo se especificó con el identificador "c". Todos estos tres párrafos contienen oraciones que podrían usarse como el contenido del párrafo. Estos párrafos se pueden representar 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 los primeros dos párrafos para formatearlos por separado, mientras usamos el id "c" con el carácter hash para formatear por separado. Usamos la propiedad del radio del borde en la primera clase "a" para agregar el radio de 25 px y el fondo sería de color azul cielo. La propiedad Radio del borde también se usó para la segunda clase para agregar el radio del borde de 45 píxeles con un borde continuo de dos píxeles a su alrededor. Para las dos primeras clases, usamos un relleno de 20 píxeles que tenía 200 píxeles de ancho y 50 píxeles de alto. Por otro lado, la ID del tercer párrafo se usó para agregar el radio de 90 px a su alrededor. Se agregó una imagen como fondo usando la propiedad de fondo. Además, la propiedad de posición de fondo se usó para colocar el fondo de una imagen y la propiedad de repetición de fondo se estableció para repetir. El uso de esta propiedad permite que la imagen de fondo se repita tantas veces como sea posible. El relleno, la altura y el ancho se especificarían de la misma manera que usamos para los párrafos en los dos estilos anteriores. El código ahora está completo y podemos ejecutarlo en Visual Studio Code desde el menú Ejecutar en la barra de tareas, seguido de la opción Iniciar depuración.

El resultado de este código HTML se mostró en el navegador Chrome como se muestra a continuación. Los primeros dos párrafos fueron diseñados dentro del radio de marco de 25 píxeles y 45 píxeles respectivamente. Ambos párrafos contienen diferentes fondos con prácticamente el mismo relleno, ancho y alto. Puede ver que los bordes de los dos radios del talón se han redondeado. Además, el tercer párrafo se mostraba dentro del radio del círculo de 90 píxeles, mientras que la imagen utilizada como fondo se repetía muchas veces.

Ejemplo #2:

Necesitamos inicializar este ejemplo con la etiqueta HTML principal y la etiqueta principal. La etiqueta de título se usó para darle a esta página HTML el título como "CSS bordes o esquinas redondeadas". Mirando la etiqueta del cuerpo de este script HTML, encontramos un solo encabezado de tamaño 1 con un título de texto simple dentro. Esta página HTML contiene 5 párrafos en total usando etiquetas o elementos de párrafo. El primer párrafo muestra que esto incluye un radio de borde de 50 píxeles y se forma la forma del eclipse. El segundo párrafo no usa nada más que un id "eclipse". Los otros tres párrafos contienen sus propias clases especificadas: cuatro, tres y dos, junto con algunos conjuntos que muestran los valores del radio del borde utilizados para crear diferentes eclipses para párrafos específicos. Estos párrafos mostrarían el número total de esquinas redondeadas. El identificador del primer párrafo "eclipse" se usó para diseñar el primer párrafo en un estilo eclipse. Para el primer párrafo, especificamos un radio de borde del 50 %, un fondo amarillo verdoso, un relleno de 10 píxeles, un ancho de 110 píxeles y una altura de 50 píxeles. Luego usamos la clase "cuatro" del tercer párrafo para redondear las cuatro esquinas del párrafo. Para hacer esto, usamos la propiedad del radio del borde para los bordes superior, inferior, izquierdo y derecho del párrafo. Especificamos el fondo como Burlywood, con un 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 serían redondeados. Para que el cuarto párrafo tenga el estilo de la clase "tres", tres de sus esquinas o bordes se redondearían mientras que uno se dejaría intacto. El fondo se especificó como dorado, mientras que el relleno, el ancho y la altura serían los mismos que usamos para el tercer párrafo. Usamos la clase dos para el quinto párrafo para redondear sus dos esquinas. Se usaría el mismo relleno, ancho y alto, mientras que el color sería diferente para ese párrafo. El primer párrafo no mostraría bordes redondeados porque no tiene estilo. Guardemos este script HTML y ejecútelo con Visual Studio Code desde la opción Iniciar depuración.

El resultado de este programa HTML mostró que el primer párrafo no contiene bordes redondeados porque no le dimos estilo a ese párrafo. Por otro lado, los cuatro tacones han sido diseñados y tenemos cantos redondeados en todos ellos.

Conclusión

Se trata de usar la propiedad del radio del borde para redondear los bordes de cualquier elemento HTML dentro del script HTML. Para ello hemos utilizado los ejemplos HTML de una forma muy sencilla y exquisita. Con el primer ejemplo, demostramos el uso de la propiedad border radius para redondear todos los bordes de un elemento o imagen a la vez sin especificar los bordes. Por otro lado, dentro del segundo ejemplo, especificamos el uso de diferentes esquinas o bordes para redondear apropiadamente esos bordes o esquinas usando diferentes valores.

Eliminar NA en R