Bordes redondeados en CSS
- Cómo funciona el radio fronterizo
- Cómo obtener las fronteras redondeadas en CSS
Cómo obtener fronteras redondeadas en CSS
Las fronteras redondeadas están respaldadas por la propiedad de Radius fronteriza del CSS. Primero buscaremos el funcionamiento de la propiedad fronteriza-radio y luego proporcionaremos algunos ejemplos.
Cómo funciona Border-Radius
La propiedad de Radius fronteriza es la propiedad abreviada que consta de las propiedades establecidas a continuación:
Radio fronterizo-martillo, radio fronterizo-derecho, radio de fondo fronterizo-izquierda y fronterizo-fondo-radio.
Principalmente, el funcionamiento de Border-Radius depende de la siguiente sintaxis:
Border-Radius: Value;Como la propiedad fronteriza-radio es una propiedad taquigrafía de cuatro propiedades infantiles, por lo tanto, puede aceptar más que valor. Si desea tener un radio diferente para varios bordes, puede elegir una de las siguientes posibilidades.
Redondea todos los bordes con el mismo tamaño
Border-Radius: Value;Redonda de la parte superior izquierda/inferior derecha e superior derecha/inferior izquierda al mismo tamaño
Border-Radius: Value1 Value2;Bordes redondos de la parte superior izquierda, superior derecha e inferior derecha
Border-Radius: Value1 Value2 Value3;Si quieres obtener bordes redondeados con diferentes tamaños
Border-Radius: Value1 Value2 Value3 Value4;Los próximos ejemplos se practican utilizando la sintaxis proporcionada anteriormente.
Ejemplo 1: Obtener los bordes redondeados
El código proporcionado a continuación se ejecuta para obtener los bordes redondeados
Bienvenido a Linuxhint
Valey de tecnología
Guías en HTML
Guías en CSS
El código se describe como,
- Entre Tag, las clases de dour se llaman "uno", "dos", "tres" y "cuatro"
- La clase "One" redondeará todos los bordes a 20px,
- La clase "Dos" redondeará la parte superior izquierda/inferior derecha y los bordes superiores/inferior izquierdo a 25px y 25px.
- La clase "tres" redondea tres fronteras de la parte superior izquierda, la parte superior derecha y la parte inferior derecha
- La clase Dour redondeará todos los bordes a diferentes tamaños
- Dentro de la etiqueta, se declaran cuatro párrafos que muestran el uso de las cuatro clases de CSS mencionadas en la etiqueta
La imagen del código se proporciona a continuación
La imagen de la salida en la página web que se muestra a continuación:
Ejemplo 2: Obtenga el borde redondeado de elección
El ejemplo anterior redondea los bordes en el orden predefinido. Por ejemplo, si usa un valor con la propiedad Border-Radius, todos los bordes se redondearían, de manera similar, si se proporcionan tres valores, el borde de la parte inferior izquierda no se redondeará.
Digamos que no queremos redondear el borde inferior de la derecha. En tales situaciones, debe usar cuatro valores y usar 0px en lugar del borde de la parte inferior derecha. El siguiente código se usa para practicar el ejemplo de borde redondeado en elección:
Bienvenido a Linuxhint
El código anterior se describe como:
- La propiedad de Radius de borde se define en la etiqueta de estilo donde el 0px se usa para omitir el redondeo del borde de la derecha inferior
- El estilo fronterizo se usa para una mejor visibilidad
- En el cuerpo, se escribe un párrafo en el que se usa el borde redondeado
La imagen del editor de códigos se muestra a continuación:
Producción
Después de pasar por esto, habría aprendido el funcionamiento del radio fronterizo y sus propiedades asociadas en varios escenarios.
Conclusión
La propiedad de Radius fronteriza facilita la obtención de las fronteras redondeadas en CSS. Border-Radius es la propiedad de mano corta y contiene funcionalidades de cuatro propiedades en ella. Este artículo demuestra las posibles formas de obtener las fronteras redondeadas en CSS. Para hacer esto, hemos presentado el funcionamiento de la propiedad de Radius fronteriza en CSS. Además, para una mejor comprensión, también hemos demostrado varios ejemplos para llevarlo a las fronteras redondeadas en CSS utilizando la propiedad Border-Radius.