Navegando por el maravilloso mundo de internet encontré una utilidad en un sitio web para crear facilmente y de manera visual border redondeados para nuestros diseños web
Link para esta utilidad: www.border-radius.com
Una breve explicación de lo que es la propiedad (border-radius): La propiedad border-radius viene incluida dentro de las nuevas propiedades de CSS3, y nos permite crear bordes redondeados en las esquinas, un ejemplo de su uso sería:
Redondear solo la esquina inferior izquierda con la siguiente propiedad y con un radio de 8px:
border-top-left-radius: 8px;
En la parte de abajo se encuentran activos las siguientes plataformas que funcionan como base para los navegadores siguientes:
- WebKit (Safari, Google Chrome, Opera, Epiphany, Maxthon, Midori, QupZilla, entre otros)
- Gecko (Es el nombre dado por Mozilla a su motor de render. Este fue originalmente llamado NGlayout)
- CSS3 (Esta seria la forma correcta y estándar aunque existan navegadores que no la tengan implementada)
Cuando accedemos a la aplicación, nos encontramos con la siguiente interfaz:
Propiedad border-radius CSS3En las 4 esquinas encontramos 4 campos para poner allí nuestros valores personalizados de radio del borde y si deseamos solo una esquina redondeada, o dos, o las 4 esquinas completas:
Ejemplo 1 (esquina superior izquierda solamente, con un borde de 8px)
Propiedad border-radius CSS3Ejemplo 2 ( todas las esquinas redondeadas de 16px)
Propiedad border-radius CSS3
Propiedad border-radius CSS3La aplicación nos generará el código necesario que necesitamos y lo único que nos faltaría sería copiar ese código e insertarlo en la hoja de estilos que estemos utilizando:
Link para esta utilidad: www.border-radius.com
