El propósito de este manual es explicar cómo crear bordes de esquinas redondeadas. Para ello, en primer lugar, debemos conocer acerca de la “ 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. Mediante el uso de esta propiedad, puede establecer el ' estilo ”, “ color ', y ' ancho ” de la frontera.
Sintaxis
La sintaxis de la propiedad border se da como:
borde : color de estilo ancho
Aquí está la descripción de los valores dados anteriormente:
- ancho: Se utiliza para establecer el ancho del borde.
- estilo: Se utiliza para establecer el estilo del 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 un borde usando CSS?
Para crear un borde, primero agregue un elemento en un archivo HTML. Para hacerlo, crearemos un
y
:
< cuerpo >
< división clase = 'esquina' >
< h1 > sugerencia de Linux < / h1 >
< pags > Esquinas redondeadas en CSS < / pags >
< / división >
< / cuerpo >
A continuación, pasaremos a la sección CSS.
Aquí el ' .esquina ” se utiliza para acceder a la clase asignada al
.esquina {
borde : 4 píxeles 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, pasaremos a la siguiente parte, donde crearemos el borde cuadrado hasta el borde de la esquina redonda.
¿Cómo redondear esquinas usando CSS?
Para crear un borde de esquina redondeada, el ' borde-radio ” se 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 border-radius se proporciona a continuación:
borde-radio : valorContinuemos con el ejemplo anterior y configuremos el radio del borde para lograr esquinas redondeadas.
Ejemplo
En ' .esquina ” clase del archivo CSS, establezca el valor de “ borde-radio ” propiedad como “ 30 píxeles ”:
borde-radio : 30px ;Con la línea anterior agregada, obtendrá el siguiente resultado:
El resultado anterior significa que los bordes se cambiaron con éxito en esquinas redondeadas debido a la propiedad border-radius.
Conclusión
En CSS “ borde-radio La propiedad ” se utiliza para cambiar la esquina de los bordes. La forma de la curva cambia según el valor dado del radio. Usando la propiedad mencionada, puede establecer el radio de la esquina según su elección. En este artículo, hemos explicado cómo redondear los bordes de las esquinas usando la propiedad border-radius con la ayuda de un ejemplo.