Soporte para "border-radius" en IE

158

¿Alguien sabe si / cuándo Internet Explorer admitirá el atributo CSS "border-radius"?

internet-explorer css Tony el Pony
fuente

Respuestas:

220

¡Si! Cuando se lanza IE9 en enero de 2011.

Digamos que quieres un 15px par en los cuatro lados:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 usará el valor predeterminado border-radius, así que asegúrese de incluirlo en todos sus estilos llamando a un radio de borde. Entonces su sitio estará listo para IE9.

-moz-border-radiuses para Firefox, -webkit-border-radiuses para Safari y Chrome.

Además: no olvides declarar que tu codificación IE es ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Algunos desarrolladores perezosos tienen <meta http-equiv="X-UA-Compatible" content="IE=7" />. Si esa etiqueta existe, border-radius nunca funcionará en IE.

Kevin Florida
fuente
77
Presumiblemente, si no está utilizando la metaetiqueta compatible con X-UA, ¿no necesita agregarla solo para que funcione en IE9?
thepeer
72
Debería colocar las versiones de prefijo del proveedor PRIMERO y el estándar ÚLTIMO, de modo que si el navegador admite el estándar real, lo usará en lugar de la versión con prefijo del proveedor.
Jason Berry
44
Correcto, no necesita la metaetiqueta ... solo necesita reemplazar el emulador ie7 si está incluido. De lo contrario, no te preocupes por eso.
Kevin Florida
3
FYI en el actual IE9 beta 'border-radius' funciona correctamente usando un solo valor. Los cuatro valores no son obligatorios a menos que realmente desee que sean diferentes.
mikemaccana
2
@nailer: Gracias por actualizar las esquinas. La primera versión alfa vs y beta vs de IE9 requirió las 4 esquinas declaradas. Acabo de descargar la última versión IE9 RC y me está dejando declaro un valor .. No sé cuando eso cambió ..
Kevin Florida
46

La respuesta a esta pregunta ha cambiado desde que se hizo hace un año. (Esta pregunta es actualmente uno de los mejores resultados para Google "border-radius ie").

IE9 será compatible border-radius.

Hay una vista previa de la plataforma disponible que es compatible border-radius . Necesitará Windows Vista o Windows 7 para ejecutar la vista previa (e IE9 cuando se lance).

David Johnstone
fuente
18

Una solución alternativa y una herramienta útil:

CSS3Pie utiliza archivos .htc y la propiedad de comportamiento para implementar CSS3 en IE 6 - 8.

Modernizr es un poco de javascript que colocará clases en su elemento html, permitiéndole servir diferentes definiciones de estilo a diferentes navegadores en función de sus capacidades.

Obviamente, estos dos agregan más sobrecarga, pero con IE9 debido a que solo se ejecuta en Vista / 7, podríamos estar atascados por un tiempo. A agosto de 2010, Windows XP todavía representa el 48% de los sistemas operativos de cliente web.

Peter G
fuente
2
CSS3 PIE fue, con mucho, la opción más fácil y menos intrusiva para esto.
Chris Rasco
12

No está planeado para IE8. Vea la página de compatibilidad de CSS .

Más allá de eso, no se han lanzado planes. Existen rumores de que IE8 será la última versión para Windows XP

Ben S
fuente
12
Obviamente estás equivocado, porque se supone que IE9 también es compatible con CSS3, y no veo que IE muera en ningún lado. Alguien por favor mata IE
Starx
10
Resulta que IE8 es la última versión ... para Windows XP.
M. Dudley
7

<!DOCTYPE html> sin esta etiqueta border-radius no funciona en IE9, no se necesitan metaetiquetas.

JAVAC
fuente
4

Use -ms-border-radius: 15px, cualquier elemento que use css -ms- es compatible con IE.

Iago Bruno
fuente
2

¿Qué pasa con el soporte para el radio del borde y el gradiente de fondo? Sí, IE9 es para apoyarlos a ambos por separado, pero si mezcla los dos, el gradiente sangra por la esquina redondeada. A continuación hay un enlace a un mal ejemplo, pero también lo he visto en mis propias pruebas. Debería haber tomado una captura de pantalla :(

Tal vez la verdadera pregunta es cuándo IE admitirá los estándares CSS sin hacks propietarios de MS-FILTER.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

SigmaBetaDiente
fuente
IE10 admitirá los gradientes CSS3 adecuados (la vista previa actual del desarrollador IE10 ya lo hace a través de -ms-linear-gradient). Si desea gradientes que respeten el radio del borde en IE9, debe usar SVG (ya sea un archivo SVG externo o uno que esté codificado en un URI de datos); consulte css3wizardry.com/2010/10/29/css-gradients-for- ie9 - también CSS3 PIE pronto automatizará esto, hay una versión de prueba disponible
lojjic
Una solución rápida es envolverlo en otro elemento. Dele al elemento padre el mismo radio de borde y establezca su desbordamiento en oculto.
Senne
1

SOLUCIONADO - no representa el radio del borde correctamente en IE 10 y 11

Para aquellos que no obtienen el radio -ms-border-radius: o el border-radius: para trabajar en IE 10,11 Y muestra todos los cuadrados, luego siga estos pasos:

  1. Haga clic en la rueda de engranaje en la parte superior derecha del navegador IE
  2. Haga clic en Configuración de vista de compatibilidad
  3. Ahora desmarque las 2 casillas que están marcadas por defecto.

Asegúrese de que las casillas estén desmarcadas como en la imagen

Allan Starr
fuente