sábado, 20 de marzo de 2021
👨💻 Bordes Redondeados CSS: Sin Imágenes (IE,Chrome, Firefox,Safari,Opera)
Muchas veces en nuestros diseños, necesitamos utilizar placas de colores redondeadas (tipo globitos) donde contener información destacada. Entonces al pasar del PSD a HTML se suele colocar una imagen de fondo, pero la misma no es versátil ya que por un lado ocupa más kilobytes, y por otro lado si luego tenemos que agrandarla porque necesitamos incluir más información, debemos realizar todo el proceso de exportado de nuevo…
En este artículo te enseñaré como crear bordes redondeados CSS sin utilizar ningún tipo de imagen.
Con la llegada de la version 3 de CSS, han aparecido nuevas e interesantes propiedades para manipular elementos. Una de ellas, es una propiedad que nos permite redondear los bordes de algunos elementos de nuestro HTML.
Entonces, para lograr una placa con bordes redondeados, solamente debemos crear un DIV con la medida que deseemos, y aplicar 2 propiedades para redondear sus bordes a nuestro gusto.
Estas propiedades son:
-moz-border-radius: valor; -webkit-border-radius: valor;
La primera «-moz-border-radius» se utiliza para el navegador Firefox, y la segunda «-webkit-border-radius» para los navegadores Safari y Chrome.
Los valores que aceptan esta propiedades son los pixeles de radio de la curva de cada uno de los 4 ángulos.
Y se escriben en el siguiente orden:
arriba-izq, arriba-der, abajo-der, abajo-izq
Entonces si por ejemplo, quisiéramos dar 15px de radio a cada ángulo, el código CSS sería el siguiente:
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
Mostraré aquí un ejemplo completo con un DIV de fondo rojo, de tamaño 200 x 200px, y con bordes redondeados de 15 px cada uno.
Código CSS:
#ppal {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
}
Código HTML:
<div id="ppal">texto de ejemplo </div>
Resultado:
Además de un color de fondo, tambien puedes poner una imagen de fondo, y la misma quedará enmascarada dentro de los bordes redondeados !!!
Implementación en Internet Explorer
Para nuestro «amigo» Internet Explorer» debemos utilizar algo mas complejo.
La solución incluye algo de JavaScript.
Debes descargarte el archivo border.htc, que esta comprimido en un ZIP en el siguiente enlace:
> Descargar archivo border.htc <
Lo descomprimes en el mismo directorio donde tienes los archivos HTML que estás utiizando.
Luego, a la clase CSS debes agregarle la siguiente linea:
behavior:url(border.htc);
Y listo!!
Funciona en Internet Explorer.
ULTIMA ACTUALIZACION: Funcionalidad para Opera
Gracias a nuestro usuario rod750, tenemos la implementación para el navegador Opera.
Solo tienes que agregar al CSS, la siguiente propiedad:
border-radius: 15px 15px 15px 15px;
El codigo final CSS para todos los navegadores, en este caso quedaría asi:
#ppal {
background-color: #F00;
height: 200px;
width: 200px;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/*para IE */
behavior:url(border.htc);
/* para Opera */
border-radius: 15px 15px 15px 15px;
}
Como se puede apreciar, un recurso de gran utilidad.
