24 técnicas más | Esquinas redondeadas con sólo CSS

Hace un tiempo os hablaba de 3 soluciones para Esquinas redondeadas en Internet Explorer | border-radius con javascript, HTC o VML. Mientras esperamos CSS3 os dejo 24 técnicas más, alternativas y soluciones para crear esquinas redondeadas.

5 Generadores online de esquinas redondeadas

1.-Spiffy Corners

Greg Johnson es el autor de 2 generadores online. Este creará un div, una caja, con esquinas redondeadas utilizando sólo CSS.

En Spiffy Corners configuras tamaño y color y obtienes el HTML y el CSS de un div con esquinas redondeadas. Sin javascript, sin imágenes y compatible con todos los navegadores.

Muy parecido a Nifty Corners pero soporta anti-aliasing.

Lástima que como veis a continuación el código HTML no cumple los estándares. 

<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
    <!—el contenido -->
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>

2.- Spiffy Box

Después de Spiffy Corners, Greg creó este generador online basada en la solución de ThrashBox. En esta ocasión, además del CSS y (X)HTML se genera una imagen.

3.- Spanky corners

Te genera el código HTML, CSS y 4 gif.

4.- Roundedcornr

Seguramente el generador de esquinas redondeadas más conocido, altamente configurable, con degradados, bordes o plano.

5.- Allcrunchy.com

Lo configuras, te descargas 1 png y copias los códigos (incluido un javascript)

12 técnicas para crear esquinas redondeadas con CSS e imágenes

1. Alsacreations: con imágenes, sin javascript y líquido. Demo
2. CSS and round corners: Making accessible menu tabs: Para crear pestañas, sólo CSS.
3. CSS and round corners: Borders with curves: varios div anidados y varias imágenes de fondo. Sólo CSS.
4. A list Apart: semántico, sencillo y sólo con 2 gif y CSS. Demo | Demo 2

   

5. stylable box: con imágenes, sin javascript y líquido.
6. Mike’s Experiments – CSS: Smart Corners: con imágenes, sin javascript y líquido.
7. Round corners and shadows: 2 imágenes, sin javascript.
8. Broader Border Corners: sencillo, una imagen que tapa el borde en la esquina. Demo

   

9. Even More Rounded Corners: sin javascript, con PNG
10. vitruelvis: 1 imagen para cada esquina, sin js pero utiliza :before and :after por lo que no es compatible con todos los navegadores, por ejemplo… IE.
11. CSS Liquid Round Corners: sin javascript, CSS y 6 imágenes, además es líquido. Demo.

    

12. Simple Box by tedd: 8 pequeños gif, sin javascript. Compatible con todos los navegadores y cumple los estándares.

7 técnicas para crear esquinas redondeadas con javascript

1. Editsite: con javascript
2. curvyCorners: Librería Javascript (demos)

   

3. 456 Berea Street: con javascript, también lo puedes utilizar para botones, demos.

   

4. Anti-aliased Nifty Corners: versión javascript de Spiffy Corners, es decir, basado en Nifty Corners con js y antialiasing.
5. Anti-aliased Rounded corners with JQuery: Demo
6. ShadedBorder – JavaScript Round Corners with Drop Shadow: Javascript, sombras, degradados. Demo.

   

7. corner.js: Multitud de efectos.

   

Otras recopilaciones:

• CSS Rounded Corners ‘Roundup’ [en]
• 25 Rounded Corners Techniques with CSS [en]