Como hacer esquinas redondeadas con Css compatible para todos los navegadores ( Firefox, Google Chrome y Safari, CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores)
Generalmente hay muchos frameworks que han venido utilizando todas estas funcionalidades, pero si vamos a empezar a entrar a este tema, entonces no vamos a aprender nada pues una idea muy interesante es que tu puedas hacer uso de este código de acuerdo a tus exigencias.
Redondear todos los bordes con CSS
Veamos la única forma mas básica y necesaria, la que generalmente utilizamos por obvias razones de ganar mucho tiempo, o quizás porque aún somos muy novatos y preferimos utilizar de acuerdo a lo que este a nuestro alcance.
border-radius: 20px 20px 20px 20px;
Un único tamaño para todos los bordes, si queremos hacerla variar ya de acuerdo a nuestras exigencias podemos empezar haciéndola variar de tamaño. Pero quizás esta tan solo sea soportado por algún navegador, y no sea visto de la misma manera en otros navegadores, ya que para ello necesitamos aumentar otro tipo de funcionalidades. Veamos entonces :
.bordesredondeados {
-moz-border-radius: 20px; /*Soportado para navegador Firefox */
-webkit-border-radius: 20px; /* Soportado para navegadores Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9 y estándar a ser soportado por todos los futuros navegadores) */
}
Como puedes ver es realmente muy fácil poder hacer los bordes redondeados con css, y puedes incluso poner color al borde de esta manera.
border: 1px solid #6a6a6a;
Podemos también alejar el texto que esta contenido dentro del cuadro de esta manera:
padding-left: 20px;
padding-right: 20px;
De izquierda a derecha, o también la puedes hacer de arriba y hacia abajo, eso ya depende de tu criterio o de lo que en ese momento vayas a necesitar.
Si quieres mas tutoriales de CSS, ya sean avanzados o básicos, tan solo necesitas decirnos en los comentarios sobre que temas hablar y nosotros con gusto te estaremos brindando mucha mas información.