No redondear todos los bordes CSS para IE

Sophie_Madrid · #1 (**permalink**) 03/12/2009, 17:33

Hola a tod@s !!

Estoy intentando arreglar para IE, la jodienda de los bordes redondeados...

Para mozilla funciona perfectamente, incluso puedes elegir el borde a redondear.

Pues bien he encontrado una solución para IE con el archivo border-ratius.htc, el problema es que esto te hace de toda la etiqueta div y yo quería simplemente de los bordes que yo elija.

No se si me he explicado bien.

Gracias por la ayuda.

Saludos.

PrendekZ · #2 (**permalink**) 03/12/2009, 17:40

Amiga, esto es CSS3.

las nuevas propiedades son solo para navegadores actualizados.

IE8 ni los coje, dicen que IE9 ya vendrá con CSS3.

PD: la única solución es que lo hagas con imágenes.

Saludos.

Sophie_Madrid · #3 (**permalink**) 03/12/2009, 17:46

Cita:

Iniciado por PrendekZ

Amigo, esto es CSS3.

las nuevas propiedades son solo para navegadores actualizados.

IE8 ni los coje, dicen que IE9 ya vendrá con CSS3.

PD: la única solución es que lo hagas con imágenes.

Saludos.

Amiga para ser mas exactos ;)

Seguro que es la única?? :(

Muchas gracias de todas formas

DragonX · #4 (**permalink**) 03/12/2009, 17:47

podes utilizar esto que anda diez puntos!

Código CSS:

Ver originaldiv.servicesoffered {position: relative;width: 28em;background:#f5f5f5;margin: 10px 0 40px 0;}
 
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position: absolute;width: 20px;height: 20px;background-color: #fff;overflow: hidden;z-index: 0;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative;font-size: 150px;font-family: arial;color: #f5f5f5;line-height: 40px;z-index: 0;}
 
div.top-left-corner { top: 0px; left: 0px; }
div.bottom-left-corner {bottom: 0px; left: 0px;}
div.top-right-corner {top: 0px; right: 0px;}
div.bottom-right-corner {bottom: 0px; right: 0px;}
div.top-left-inside {left: -8px;}
div.bottom-left-inside {left: -8px; top: -17px;}
div.top-right-inside {left: -25px;}
div.bottom-right-inside {left: -25px; top: -17px;}

y el HTML:

Código html:

Ver original<!-- Rounded Div -->
            <div class="comunbox">
              <div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
              <div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
              <div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
              <div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
                <div class="box-comuncontent">
                <h3>titulo</h3>
                <p>info</a></p>
              </div> 
            </div>
          <!-- Ends Rounded Div -->

espero te sirva!

PrendekZ · #5 (**permalink**) 03/12/2009, 17:48

oh! perdón, no me fijo mucho en los nombres, solo entro a colaborar :$

y si creo que es la única forma.. puede deprónto hacerse con Javascript pero no se... yo siempre uso igual -moz-border-radius, de igual forma en IE no se puede ver, Cuidate y saludos.

Cualquier cosa escribeme y te ayudaré.

Marrselo · #6 (**permalink**) 06/12/2009, 09:38

Cita:

Iniciado por DragonX

podes utilizar esto que anda diez puntos!

Código CSS:

Ver originaldiv.servicesoffered {position: relative;width: 28em;background:#f5f5f5;margin: 10px 0 40px 0;}
 
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner {position: absolute;width: 20px;height: 20px;background-color: #fff;overflow: hidden;z-index: 0;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative;font-size: 150px;font-family: arial;color: #f5f5f5;line-height: 40px;z-index: 0;}
 
div.top-left-corner { top: 0px; left: 0px; }
div.bottom-left-corner {bottom: 0px; left: 0px;}
div.top-right-corner {top: 0px; right: 0px;}
div.bottom-right-corner {bottom: 0px; right: 0px;}
div.top-left-inside {left: -8px;}
div.bottom-left-inside {left: -8px; top: -17px;}
div.top-right-inside {left: -25px;}
div.bottom-right-inside {left: -25px; top: -17px;}

y el HTML:

Código html:

Ver original<!-- Rounded Div -->
            <div class="comunbox">
              <div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
              <div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
              <div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
              <div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
                <div class="box-comuncontent">
                <h3>titulo</h3>
                <p>info</a></p>
              </div> 
            </div>
          <!-- Ends Rounded Div -->

espero te sirva!

Amigo Dragon gracias por el código, lo he probado, me había echo bolas porque no veia que funcionaba, hasta que le puse color a la etiqueta H3 y voala , el tema es que el borde no sale redondeado sale cuadrado que podria hacer entonces?

gracias

jomaruro · #7 (**permalink**) 06/12/2009, 14:42

Hola:

Creo que el fallo en el código de DragonX está aquí:

Código:

<!-- Rounded Div -->
<div class="comunbox">
<div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
<div class="box-comuncontent">
<h3>titulo</h3>
<p>info</a></p>
</div>
</div>
<!-- Ends Rounded Div -->

pero mejor que lo confirme el autor.

Saludos.

Marrselo · #8 (**permalink**) 08/12/2009, 17:11

Cita:

Iniciado por jomaruro

Hola:

Creo que el fallo en el código de DragonX está aquí:

Código:

<!-- Rounded Div -->
<div class="comunbox">
<div class="top-left-corner"><div class="comuntop-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="comunbottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="comuntop-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="comunbottom-right-inside">&bull;</div></div>
<div class="box-comuncontent">
<h3>titulo</h3>
<p>info</a></p>
</div>
</div>
<!-- Ends Rounded Div -->

pero mejor que lo confirme el autor.

Saludos.

gracias por tu respuesta chekare ese codigo

Sophie_Madrid · #9 (**permalink**) 09/12/2009, 08:39

Yo no he conseguido que funciones... alguna sugerencia mas?

Saludos.

jomaruro · #10 (**permalink**) 09/12/2009, 17:12

Hola:

Yo he hecho estas modificaciones:

Código HTML:

Ver original<!-- Rounded Div -->
<div class="comunbox">
<div class="top-left-corner"><div class="top-left-inside">&bull;</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>
<div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
<div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</div></div>
<div class="box-comuncontent"><h3>titulo</h3><p>info</p></div> 
</div>
<!-- Ends Rounded Div -->

El CSS lo he dejado como estaba salvo esta línea que he cambiado el color:

Código CSS:

Ver originaldiv.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative; font-size: 150px; font-family: arial; color: #ff0000; line-height: 40px; z-index: 0;}

Deberías ver unas esquinas redondeadas en las esquinas del navegador.

Saludos.

Sophie_Madrid · #11 (**permalink**) 10/12/2009, 04:20

Muchas gracias jomaruro, ya consigo ver las esquinas del explorador redondeadas ;)

Ahora el más dificil todavía, ¿se le puede poner un borde de otro color a esas esquinas.

Tachannnnnnn !!!

Mil gracias !!! ;)

Besos

jomaruro · #12 (**permalink**) 10/12/2009, 17:44

Hola:

En la línea que te indiqué antes:

Código:

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position: relative; font-size: 150px; font-family: arial; color: #ff0000; line-height: 40px; z-index: 0;}

Sólo tienes que poner el color que quieras (donde te lo marco en azul)

Saludos.

Marrselo · #13 (**permalink**) 15/12/2009, 13:09

FUNCIONA ! HASTA CON IE6 y no tiene javascript, acabo de ver la luz gracias

jomaruro · #14 (**permalink**) 15/12/2009, 15:57

Hola:

De nada Marrselo, a mandar.

Saludos.