243 votos

¿Cuál es la mejor manera de crear esquinas redondeadas usando CSS?

¿Cuál es la mejor manera de crear esquinas redondeadas usando CSS?

98voto

Yaakov Ellis Puntos 15470

Desde CSS3 fue introducido, la mejor manera para añadir esquinas redondeadas usando CSS es mediante el uso de la border-radius de la propiedad. Usted puede leer la especificación de los bienes, o conseguir la implementación útil información sobre MDN:

Si usted está utilizando un navegador que no implementar border-radius (Cromo pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), entonces los enlaces que a continuación se detallan un montón de diferentes enfoques. Encontrar uno que se adapte a su sitio y el estilo de codificación, y que se vaya con él.

  1. CSS Diseño: la Creación Personalizada de Esquinas Y fronteras
  2. CSS las Esquinas Redondeadas de 'Roundup'
  3. 25 Esquinas Redondeadas Técnicas con CSS

80voto

Jeff Atwood Puntos 31111

Yo veía esto desde el principio en la creación de Stack Overflow, y no podía encontrar cualquier método para crear esquinas redondeadas que no me siento como si hubiera caminado a través de un sistema de alcantarillado.

CSS3 finalmente definir el

border-radius:

Que es exactamente cómo quiere que funcione. Aunque esto funciona en las últimas versiones de Safari y Firefox, pero no en todos en IE7 (y no creo que en IE8) o la Ópera.

En el ínterin, hacks todo el camino hacia abajo. Estoy interesado en escuchar lo que otras personas piensan que es la forma más limpia de hacerlo a través de IE7, FF2/3, Safari3, y Opera 9.5 en el momento..

27voto

Sinan Yasar Puntos 4525

Yo por lo general obtener la esquinas redondeadas sólo con css, si el navegador no soporta ver el contenido con tv de esquinas. Si esquinas redondeadas no son tan críticas para el sitio usted puede utilizar estas líneas de abajo.

Si desea utilizar todas las esquinas con el mismo radio que es la forma fácil:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

pero si usted quiere controlar cada rincón de este es bueno:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

Como se puede ver en cada juego tienes explorador de estilos específicos y en la cuarta filas declaramos de forma estándar, por esto asumimos que si en un futuro (esperemos que es decir demasiado) decidir la aplicación de la característica de nuestro estilo de estar listo para ellos también.

Como dije en otras respuestas, esto funciona muy bien en Firefox, Safari, Camino, Chrome.

16voto

Sniffer Puntos 1852

Si usted está interesado en la creación de esquinas en el IE, entonces este puede ser de utilidad - http://css3pie.com/

13voto

Lance Fisher Puntos 13547

Yo recomiendo usar imágenes de fondo. Los otros caminos no son tan buenos: No anti-aliasing y el marcado sentido. Este no es el lugar para el uso de JavaScript.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: