Tutorial esquinas redondeadas con CSS3

Tutoriales : Esquinas Redondeadas con CSS3

Este tutorial trata de la creación de efectos de esquinas redondeadas, con la ayuda de CSS3. Este efecto se consigue utilizando la propiedad "border-radius" y realmente ahorro de tiempo que se desperdicia en la creación de alrededor de bordes fronterizos imágenes en Photoshop y luego se utilizan en los diseños de la tela.Por ahora, este efecto sólo es visible en las últimas versiones de Mozilla Firefox, Chrome, Safari y Opera, y no en IE todavía. Sin embargo, Microsoft ha confirmado el apoyo de CSS3 en Internet Explorer 9. Y echar un vistazo a la actualización de la propiedad Border Radius de CSS3 en IE9 página de Test Drive.

Ejemplos CSS3 de la Propiedad “border-radius”

Ejemplo 1

This box was created using the following code.

<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;padding: 10px;”></div>

Ejemplo 2

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Ejemplo 3

-webkit-border-radius: 20px;
-moz-border-radius: 20px;

Ejemplo 4

-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 24px;
-moz-border-radius-topleft: 24px;
-moz-border-radius-bottomright: 24px;
border-top-left-radius: 24px;
border-bottom-right-radius: 24px;

Ejemplo 5

-webkit-border-radius: 36px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius: 36px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomleft: 12px;
border-radius: 36px;
border-top-right-radius: 12px;
border-bottom-left-radius: 12px;

Ejemplo 6

-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;

Ejemplo 7

-webkit-border-top-left-radius: 50px 30px;
-webkit-border-top-right-radius: 50px 30px;
-moz-border-radius-topleft:50px 30px;
-moz-border-radius-topright: 50px 30px;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;

y mucho más...

Aquí, me gustaría hablar de esta genial herramienta de CSS "border-radius" que genera el código CSS3 por ti. Todo lo que tienes que hacer es ajustar el valor del punto de “border-radius” valor, copie el código CSS generado y pégalo en tu hoja de estilo, como se muestra en la codebox a continuación.

.example {
background-color:#F1F1F1;
border:3px solid:#DDD;
text-align:center;
width:400px;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

En resumen, este CSS3 border-radius propiedad minimiza el uso de las imágenes en nuestra página web, ahorro de tiempo y acelera las cargas de página.