Crear esquinas redondeadas usando CSS

¿Cómo puedo crear esquinas redondeadas usando CSS?

Desde que se introdujo CSS3, la mejor manera de agregar esquinas redondeadas mediante CSS es mediante el uso de la propiedad border-radius . Puede leer las especificaciones en la propiedad u obtener información de implementación útil en MDN :

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

  1. Diseño de CSS: creación de bordes personalizados y bordes
  2. CSS Round Rounded ‘Roundup’
  3. 25 técnicas de esquinas redondeadas con CSS

Lo estudié desde el principio en la creación de Stack Overflow y no pude encontrar ningún método para crear esquinas redondeadas que no me dejaran con la sensación de estar caminando por una alcantarilla.

CSS3 finalmente define el

 border-radius: 

Que es exactamente como quieres que funcione. Aunque esto funciona bien en las últimas versiones de Safari y Firefox, pero no en absoluto en IE7 (y no creo en IE8) u Opera.

Mientras tanto, es pirateo todo el camino hacia abajo. Estoy interesado en escuchar lo que otras personas piensan que es la forma más limpia de hacerlo en IE7, FF2 / 3, Safari3 y Opera 9.5 en este momento.

Generalmente obtengo esquinas redondeadas solo con css, si el navegador no es compatible, ven el contenido con las esquinas planas. Si las esquinas redondeadas no son tan importantes para su sitio, puede usar estas líneas a continuación.

Si desea utilizar todas las esquinas con el mismo radio, esta es la manera más fácil:

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

pero si quieres controlar cada rincón, esto 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 ve en cada conjunto tiene estilos específicos del navegador y en las cuartas filas declaramos de manera estándar que suponemos que en el futuro los otros (con suerte IE también) decidan implementar la característica para que nuestro estilo esté preparado para ellos también.

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

Si está interesado en crear esquinas en IE, puede ser útil: http://css3pie.com/

Yo recomendaría usar imágenes de fondo. Las otras formas no son tan buenas: sin anti-aliasing y marcado sin sentido. Este no es el lugar para usar JavaScript.

Como dijo Brajeshwar: Usando el selector border-radius css3. Por ahora, puede aplicar -moz-border-radius y -webkit-border-radius para navegadores basados ​​en Mozilla y Webkit, respectivamente.

Entonces, ¿qué ocurre con Internet Explorer? Microsoft tiene muchos comportamientos para hacer que Internet Explorer tenga algunas características adicionales y obtenga más habilidades.

Aquí: un archivo de comportamiento .htc para obtener round-corners partir border-radius valor del border-radius del border-radius en su CSS. Por ejemplo.

 div.box { background-color: yellow; border: 1px solid red; border-radius: 5px; behavior: url(corners.htc); } 

Por supuesto, el selector de comportamiento no es un selector válido, pero puede colocarlo en un archivo css diferente con comentarios condicionales (solo para IE).

El comportamiento del archivo HTC

Con la compatibilidad con CSS3 implementada en las versiones más recientes de Firefox, Safari y Chrome, también será útil mirar “Radio de borde”.

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

Al igual que cualquier otra taquigrafía de CSS, lo anterior también se puede escribir en formato expandido, y así lograr un Radio de borde diferente para el topleft, topright, etc.

 -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 3px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 3px; 

jQuery es la forma en que lidiaré con esto personalmente. El soporte CSS es mínimo, las imágenes son demasiado complicadas, para poder seleccionar los elementos que desea tener esquinas redondeadas en jQuery tiene perfecto sentido para mí, aunque algunos sin duda argumentarán lo contrario. Hay un complemento que utilicé recientemente para un proyecto en el trabajo aquí: http://plugins.jquery.com/project/jquery-roundcorners-canvas

Siempre está el modo JavaScript (ver otras respuestas) pero dado que se trata de un estilo puro, estoy en contra del uso de scripts de cliente para lograr esto.

La forma en que prefiero (aunque tiene sus límites) es usar 4 imágenes de esquina redondeadas que colocará en las 4 esquinas de su cuadro usando CSS:

 

 /******************************** * Rounded styling ********************************/ .Rounded { position: relative; } .Rounded .RoundedCorner { position: absolute; background-image: url('SpriteSheet.png'); background-repeat: no-repeat; overflow: hidden; /* Size of the rounded corner images */ height: 5px; width: 5px; } .Rounded .RoundedCorner-TopLeft { top: 0; left: 0; /* No background position change (or maybe depending on your sprite sheet) */ } .Rounded .RoundedCorner-TopRight { top: 0; right: 0; /* Move the sprite sheet to show the appropriate image */ background-position: -5px 0; } /* Hack for IE6 */ * html .Rounded .RoundedCorner-TopRight { right: -1px; } .Rounded .RoundedCorner-BottomLeft { bottom: 0; left: 0; /* Move the sprite sheet to show the appropriate image */ background-position: 0 -5px; } /* Hack for IE6 */ * html .Rounded .RoundedCorner-BottomLeft { bottom: -20px; } .Rounded .RoundedCorner-BottomRight { bottom: 0; right: 0; /* Move the sprite sheet to show the appropriate image */ background-position: -5px -5px; } /* Hack for IE6 */ * html .Rounded .RoundedCorner-BottomRight { bottom: -20px; right: -1px; } 

Como se mencionó, tiene sus límites (el fondo detrás de la caja redondeada debe ser claro, de lo contrario las esquinas no coincidirán con el fondo), pero funciona muy bien para cualquier otra cosa.


Actualizado: Mejorado la implementación mediante el uso de una hoja de sprite.

A mi personalmente me gusta esta solución, es una .htc para permitir que IE renderice bordes curvos.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

En Safari, Chrome, Firefox> 2, IE> 8 y Konquerer (y probablemente otros) puede hacerlo en CSS utilizando la propiedad border-radius . Como todavía no forma parte oficialmente de la especificación, utilice un prefijo específico del proveedor …

Ejemplo

 #round-my-corners-please { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 

Las soluciones de JavaScript generalmente agregan un montón de pequeñas div para que se vea redondeada, o usan bordes y márgenes negativos para crear esquinas con muescas de 1px. Algunos también pueden utilizar SVG en IE.

IMO, el modo CSS es mejor, ya que es fácil, y se degradará con gracia en los navegadores que no lo admiten. Este es, por supuesto, solo el caso donde el cliente no los aplica en navegadores no compatibles como IE <9.

Aquí hay una solución HTML / js / css que hice recientemente. Hay un error de redondeo de 1px con un posicionamiento absoluto en IE, por lo que desea que el contenedor tenga un número par de píxeles de ancho, pero está bastante limpio.

HTML:

 
Content

jQuery:

 $("div.s") .wrapInner("
") .prepend('
');

CSS:

 /*rounded corner orange box - no title*/ .s { position: relative; margin: 0 auto 15px; zoom: 1; } .s-iwrap { border: 1px solid #FF9933; } .s-iwrap2 { margin: 12px; } .s .br,.s .bl, .s .tl, .s .tr { background: url(css/images/orange_corners_sprite.png) no-repeat; line-height: 1px; font-size: 1px; width: 9px; height: 9px; position: absolute; } .s .br { bottom: 0; right: 0; background-position: bottom right; } .s .bl { bottom: 0; left: 0; background-position: bottom left; } .s .tl { top: 0; left: 0; background-position: top left; } .s .tr { top: 0; right: 0; background-position: top right; } 

La imagen tiene solo 18 px de ancho y tiene las 4 esquinas juntas. Parece un circulo

Nota: no necesita el segundo contenedor interno, pero me gusta utilizar el margen en el contenedor interno para que los márgenes en los párrafos y encabezados aún mantengan el colapso del margen. También puede omitir el jquery y simplemente colocar el contenedor interno en el html.

Como una indicación de cuán complejo es hacer funcionar las esquinas redondeadas, incluso Yahoo las desalienta (¡consulte el primer punto con viñetas)! De acuerdo, solo están hablando de esquinas redondeadas de 1 píxel en ese artículo, pero es interesante ver que incluso una empresa con su experiencia ha llegado a la conclusión de que son demasiado dolor para que funcionen la mayor parte del tiempo.

Si su diseño puede sobrevivir sin ellos, esa es la solución más fácil.

Claro, si se trata de un ancho fijo, es muy fácil usar CSS, y para nada ofensivo o laborioso. Es cuando lo necesitas para escalar en ambas direcciones que las cosas se ponen agitadas. Algunas de las soluciones tienen una cantidad asombrosa de divs astackdos uno encima del otro para que suceda.

Mi solución es dictarle al diseñador que si quiere usar esquinas redondeadas (por el momento), debe tener un ancho fijo. A los diseñadores les encantan las esquinas redondeadas (yo también), así que considero que es un compromiso razonable.

Ruzee Borders es la única solución de esquina redondeada antialias basada en Javascript que he encontrado que funciona en todos los principales navegadores (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), y TAMBIÉN el único que funciona cuando tanto el elemento redondeado COMO el elemento principal contienen una imagen de fondo. También hace bordes, sombras y shiny.

El nuevo RUZEE.ShadedBorder es otra opción, pero carece de soporte para obtener información de estilo de CSS.

Si vas a ir con la solución border-radius, existe este increíble sitio web para generar el css que lo hará funcionar para safari / chrome / FF.

De todos modos, creo que tu diseño no debería depender de la esquina redondeada, y si miras a Twitter, simplemente dicen F **** para IE y los usuarios de la ópera. Es bueno tener las esquinas redondeadas, y personalmente estoy bien manteniendo esto para los usuarios geniales que no usan IE :).

Ahora, por supuesto, no es la opinión de los clientes. Aquí está el enlace: http://border-radius.com/

A la adición de las soluciones htc mencionadas anteriormente, aquí hay otras soluciones y ejemplos para alcanzar las esquinas redondeadas en IE .

No existe la “mejor” manera; hay formas que funcionan para usted y otras que no. Habiendo dicho eso, publiqué un artículo sobre la creación de una técnica de esquina redonda fluida basada en CSS + Imagen aquí:

Caja con esquinas redondeadas usando CSS e imágenes – Parte 2

Una visión general de este truco es que utiliza DIV nesteds y repetición y posicionamiento de imágenes de fondo. Para diseños de ancho fijo (altura estirable de ancho fijo), necesitará tres DIV y tres imágenes. Para un diseño de ancho de fluido (ancho y altura estirable), necesitará nueve DIV y nueve imágenes. Algunos podrían considerarlo demasiado complicado, pero en mi humilde opinión es la mejor solución de todos. Sin hacks, sin JavaScript.

Escribí un artículo de blog sobre esto hace un tiempo, así que para más información, mira aquí

 
This is the text that is displayed

Funciona bastante bien. No se necesita Javascript, solo CSS y HTML. Con HTML mínimo interfiriendo con las otras cosas. Es muy similar a lo que Mono publicó, pero no contiene ningún hack específico de IE 6, y después de verificarlo, no parece funcionar en absoluto. Además, otro truco es hacer que la parte interior de cada imagen de esquina sea transparente para que no bloquee el texto que está cerca de la esquina. La parte exterior no debe ser transparente, por lo que puede cubrir el borde del div no redondeado.

Además, una vez que CSS3 es ampliamente compatible con border-radius, esa será la mejor forma oficial de hacer esquinas redondeadas.

No use CSS, jQuery ha sido mencionado varias veces. Si necesita un control total del fondo y el borde de sus elementos, pruebe el plugin jQuery Background Canvas . Coloca un elemento Canvas de HTML5 en segundo plano y te permite dibujar cada fondo o borde que desees. Esquinas redondeadas, degradados, etc.

Opera aún no admite border-radius (aparentemente estará en el lanzamiento posterior a la versión 10). Mientras tanto, puede usar CSS para establecer un fondo SVG para crear un efecto similar .