Éste es un código que siempre se me olvida y lo apunto en el blog para no perderlo más. Es un código en css para limar las esquinas de un div, compatible con internet explorer y mozilla, sin imágenes ni javaScript. El código css es el siguiente:
div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
Y en el html para aplicarlo:
<div id="nifty"> <b> <b></b><b></b> <b class="r3"></b> <b></b> </b> <!-- aquí el contenido --> <b> <b></b> <b class="r3"></b> <b></b> <b class="r1"></b> </b> </div>
me parece que el codigo no esta completo
@gabriel el código está completo, qué es lo que crees que falta?
Un saludo
gabiel lo q falta son las librerias…. buscalas como “Nifty” en google… :)
@El amo del Universo pues va a ser que no.
Ésto es un código css y html sin más, el hecho de que el id de la capa se llame nifty, no significa que tenga algo que ver con la libreria javascript para conseguir éste efecto.
Un saludo
Asier, genial!! estoy pasos mis primeros en éste mundillo, y este detalle para los div me parece muy bueno y a la vez de sencillo de hacer. Enhorabuena..
Buenas
Acabo de probar este código y se me ve correctamente en Firefox 2.0.0.13 y Safari 3.1, pero en IExplorer 7 y Opera 9.26 se me ve el div cuadrado.
Y por cierto, hay un fallo en el codigo, un espacio de mas en ““. Deberia ser ““.
P.D.: Vale, se me interpreto el codigo en vez de salir tal cual. Lo que queria decir era:
Donde pone < b class=”rtop”> deberia ser <b class=”rtop”>
@LaicaNuru si tienes razón, hay un espacio en la etiqueta b.
En opera no he probado el código, pero en IE7 si, y se ve perfectamente.
Gracias por la observación, un saludo.
Muy bueno el truco!! Gracias…
Excelente sin palabras
Q bien gracias, mes irvio de mucho, saludos
Excelente, sencillo y muy claro. Lo utilice para redondear bordes de imagenes. Felicitaciones
SOY ENTERO WN CTM NO SIRBIO LA WEA
Muchas gracias por el codigo pero la verdad no funciona en IE7 tiene problemas pero aqui les coloco uno que funciona bien
http://spiffycorners.com/index.php?sc=spiffy&bg=378EC0&fg=b20000&sz=5px
y uno escoge como lo quiere
Espero le sirva
hola! quisiera saber si saben como hacerlo solo con los bordes y no un fondo completo.
Gracias!
Lo probé y me funcionó bien en ie7, firefox3 y chrome. Muchas gracias por el código, en realidad es efectivo.
Hola:
Se ve perfectamente, muy bueno, pero intento ponerle un tamaño fijo y no puedo, pudieras ayudarme con esto.
Gracias de antemano.
Gracias
Gracias por el código… funciona perfectamente!
Funciona bien, en todos los navegadores y es de gran ayuda ya q siempre ahorrar peso en una pagina es bueno se agradece el codigo.
Bueno pues no esta demás darle el toquecito de gracia que tiene el ejemplo para poder visualizar no es cierto,
Un abrazo.
Juan
Hola,
El codigo me funcionó de maravilla… gracias
Untitled Document
div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
[Aquí el contenido]
[Aquí el contenido]
http://www.forosdelweb.com/f53/redondear-esquinas-como-mozilla-org-370138/ aqui está bien, el codigo de arriba no funciona
Pues a mí no me funciona en ningún navegador…
Firefox 3.6.9
Explorer 8.0
Chrome 5.0.375.127
:-(
Hola a todos, este post lo escribí hace 3 años, hoy en día os recomiendo utilizar jquery con plugins como este http://jquery.malsup.com/corner/
Saludos