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 estandar aunque existan navegadores que no la tengan implementada)

Cuando accedemos a la aplicación, nos encontramos con la siguiente interfaz:

Propiedad border-radius CSS3

Propiedad border-radius CSS3

En 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 CSS3

Propiedad border-radius CSS3

Ejemplo 2 ( todas las esquinas redondeadas de 16px)

Propiedad border-radius CSS3
Propiedad border-radius CSS3

Propiedad border-radius CSS3

 La 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