Div con bordes redondeados y degradado

[rogue_sb]

Necesito en mis sitio realizar divs con bordes redondeados y fondo degradado. Algo que logré perfectamente para Firefox y Chrome. El tema es, como se deben imaginar, con Internet Explorer 8.

Para los bordes readondeados utilizo un archivo .htc de este site:
[URL="http://css3pie.com/"]http://css3pie.com/[/URL]

Y para el degradado la siguiente instrucción en una clase CSS:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startC olorstr=#306F88, endColorstr=#A2CEE2);";

El problema surge que la instrucción para el degradado anula lo que hice para los bordes redondeados. ¿Alguna ayuda de como solucionar esto?

[sanxuan]

Yo siempre los he realizado con imágenes tanto para las esquinas como para el fondo degradado y no he tenido problemas de compatibilidad. CSS3 aún no es un estándar.
Yo no recomiendo usar propiedades exclusivas de ningún navegador salvo casos muy concretos. Es mi opinión particular.

[Fraannn]

Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);

[rogue_sb]

Iniciado por Fraannn

Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);

Buenisimo!!! ahora me funca todo perfect en IE8, Mozilla y Chrome! Graciela

[rogue_sb]

Iniciado por Fraannn

Para degradado uso esto:
background: #666666;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#666666), to(#000000));
background: -moz-linear-gradient(#666666, #000000);
background: linear-gradient(#666666, #000000);
-pie-background: linear-gradient(#666666, #000000);

Para sombras uso:
box-shadow: 5px -9px 3px #333;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;

y para esquinas redondeadas:

border.radius: 15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
behavior:url(border-radius.htc);

Quería Frann si sabías como hacer esto para el reciente IE9, vi muchas formas por internet, pero quería seguir esta misma forma de trabajo. Saludos!

[xlos_mas_pro]

lo que se hace para realisar es quear una imagen transparente pero crear solo las esquinas redondiadas de cada borde aun que existe un programa que el otro dia vi por internet que lo haced con javascript no me acuerdo como se llama pero busca en google y lo encontraras y para lo de el dregradado mejor te recomiendo que crees una imagen y la pongas de fondo con el div y que la imagen tenga bordes redondos pero si quieres solo bordes redondos busca ese programa es muy bueno

Suerte xlos_mas_pro

[rogue_sb]

Iniciado por xlos_mas_pro

lo que se hace para realisar es quear una imagen transparente pero crear solo las esquinas redondiadas de cada borde aun que existe un programa que el otro dia vi por internet que lo haced con javascript no me acuerdo como se llama pero busca en google y lo encontraras y para lo de el dregradado mejor te recomiendo que crees una imagen y la pongas de fondo con el div y que la imagen tenga bordes redondos pero si quieres solo bordes redondos busca ese programa es muy bueno

Suerte xlos_mas_pro

Si, había probado con nifty cube para redondeado y esas cosas. Vi que hay muchas alternativas, pero me gustaría saber sí es posible mediante puro CSS. Para no llenar de imágenes el sitio.

[xlos_mas_pro]

Pero claro hay un hack que es un javascript que remplaza cada codigo y puedes programarlo con css3 y se te visualizara en los IE Espera deja buscarlo un poco y te digo el nombre ok se que funciona con bordes redondeados y sombras no se si con degradados pero yo lo estaba utilizando anteriormente

[emprear]

Hay varios, uno que funciona muy bien en IE/6/7/8/9 es

http://css3pie.com/

Saludos