Realizar bordes redondeados facilmente con CSS3

Por: Fecha de publicación: Numero de comentarios: Sin comentarios.

4410947793 4163908f6f Realizar bordes redondeados facilmente con CSS3

Desde sus primeras versiones CSS ha tenido como premisa separar el contenido del aspecto visual,lo cual se ha logrado, hoy en día se encuentra en desarrollo la versión de CSS3, yo he venido trabajando con CSS2 , a pesar de que este sigue vigente, es importante comenzar a conocer que opciones nos dará CSS3, es por eso que hoy les traigo un tutorial sencillo que nos permitirá realizar uno de los elemento visuales mas usados hoy en día. Hablo de los bordes redondeados, eso que le dan un toque visual bastante agradable a los contenedores de texto e imágenes.

Para realizar esto haremos uso de la propiedad CSS3 Border-radius, el único inconveniente de este método es que solo funciona con los navegadores Chrome,Firefox, Safari, y no con Internet Explorer, ya saben como se las gastan los de Microsoft con eso de seguir estándares , esperemos que en el IE9 por fin se pongan a la par con sus competidores, pero no se diga mas, manos a la obra.

1.- Lo primero que haremos será crear nuestro div contenedor, como quizás uses muchos bordes redondeados podemos crear una clase para el Div al que llamaremos redondeado. nuestro código puede verse como este :

<div>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
</div>

2.- Ahora lo siguiente sera aplicar la nueva regla de CSS3 para creer los bordes redondeados .

.redondeado {
-moz-border-radius: 20px; /*borde para Firefox*/
-webkit-border-radius: 20px; /*borde para chrome y safari*/
padding-left:15px; /*Ajustamos nuestro texto*/
background-color: black;
color:white;
}

El resultado final sera algo como esto :

4411698032 5d46a769f6 Realizar bordes redondeados facilmente con CSS3

Como podrán observer más facil imposible.

Notas finales:

Esta nueva propiedad permite redondear cada una de las esquina por separa para lograr efectos diferentes para esto se pueden utilizar las siguientes propiedades.

Para Firefox

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

Para Chrome y Safari

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius

Visto en CSS3 Info

Diego Armando

Sigueme en Twitter: @anotherdagou

Apasionado de las nuevas tecnologías que surgen día a día en Internet. Me encanta todo aquello que tiene que ver con el diseño, la creación de interfaces web, redes sociales, y emprendimiento. Hobbies: videojuegos, cine, música, escribir etc. Sueño que mi trabajo sirva de inspiración para los demás.

407 Entradas escritas por: Diego Armando

Comparte este Post con tus amigos