16 técnicas para lograr esquinas redondeadas con CSS

Publicado por Nikko el dia 28 Jul 2007 - Guardado en CSS, Diseño Web Leido 15,129 Veces

Las esquinas redondeadas son hoy una las técnicas mas populares en Internet, sobre todo si hablamos del universo denomino 2.0. Incluso hoy podemos verlo en servicio tan populares como Google Adsense, servicio que ahora permite a los usuarios optar por esquinas redondeadas para mostrar los anuncios.
Existen varias formas de llegar al mismo resultado, y más aun de adaptar esta técnica a nuestros diseños. Pero si bien la técnica es agradable, es bueno saber donde utilizarla, y de que forma combinar esta técnica con el resto de nuestro diseño.
A continuación podremos ver 16 técnicas de esquinas redondeadas con CSS, con la idea de que puedas obtener mejores opciones.

cut.gif

ThrashBox – (Crear esquinas redondeadas)- Esquina con una sombra suave visual y con un margen mínimo.

thrashbox.jpg

cut.gif

Schillmania, con un bello artículo que detalla un método para hacer esquinas redondeadas con CSS. En este caso, diálogos de esquinas con imágenes, en todas sus partes utilizando Png, bordes líquidos redondeados, transparencia alfa, gradientes, patrones y cualquier otra cosa que tú (o tu diseñador) podría desear. Podrás ver un demo aquíDescarga de Códigos e imágenesArticulo original

schillmania.jpg

cut.gif

DomCorners – una técnica muy simple para conseguir esquinas redondeadas.

domcorners.jpg

cut.gif

virtuelvis.com esquinas redondeadas con CSS que permite que adaptes esto a los diseños existentes sin alterar ningún margen de beneficio.

virtuelvis.jpg

cut.gif

456bereastreetUna técnica para crear esquinas y bordes con la transparencia alfa opcional.

456bereastreet.jpg

cut.gif

Esquinas en listas de noticias – fue diseñada para exhibir enlaces a las noticias recientes.

listas.jpg

cut.gif

Esquinas redondeadas líquidas utilizando CSS – una caja redondeada reutilizable, esta técnica utiliza en total 6 imágenes. Pero su diseño es realmente bello.

liqquidas.jpg

cut.gif

Esquinas Nifty de Anti-aliased – basadas en las esquinas Nifty y modificadas por Steven Wittens.

nifty-corners.jpg

cut.gif

Caja simple realizada por tedd – ideal para diseños no muy cargados.

caja-simple.jpg

cut.gif

Las esquinas redondeadas herméticas – Con esta técnica podremos realizar una caja con las esquinas redondeadas usando solamente una imagen, y fijando esa imagen para cada esquina.

hermetica.jpg

cut.gif

Crear un bloque redondeado – Una técnica que requiera dos imágenes una actuando como encabezado y otra para el contenido, es muy fácil de utilizar y nos da lugar a conseguir resultados muy agradables y fácilmente.

bloque.jpg

cut.gif

Esquinas redondas elegantes – una solución práctica utilizando imágenes pequeñas para los bordes.

elegantes.jpg

cut.gif

Esquinas redondeadas en CSS por Adán Kalsey – requiere 4 imágenes para la esquinas. Muy sencilla y fácil.

esquinas.jpg
genradores.jpg

Roundedcornr.com – Herramienta sencilla para generar las esquinas redondeadas.

roundedcornr.jpg

cut.gif

Spiffycorners.com – La manera mas simple de generar el CSS y HTML que necesitas para las esquinas sin usar imágenes o Javascript.

 

spiffycorners.jpg

 

cut.gif

Spiffybox.com – otro proyecto de los mismos creadores de esquinas Spiffy

 

spiffyboxge.jpg

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. sesebian - Gravatar

    sesebian

    28-07-2007

    Permalink

    ?yi çal??ma aferim (:

  2. 16 técnicas para lograr esquinas redondeadas con CSS…

    Recopilación en Xybernéticos con 16 técnicas para lograr esquinas redondeadas, que podemos adaptar a nuestros propios diseños….

  3. [...] técnicas CSS para mostrar esquinas redondeadas En el blog XYBERNETICOS encuentro un buen artículo en donde habla sobre las esquinas redondeadas y comenta que? son una [...]

  4. Chicoblog - Gravatar

    Chicoblog

    28-07-2007

    Permalink

    Geeenial!!!

    Gracias, lo leere cada tip de css!!!

    Saludos ;)

  5. [...] 16 técnicas para haces esquinas redondeadas con CSS. vía: Xyberneticos [...]

  6. [...] 16 técnicas para lograr esquinas redondeadas con CSS « Xyberneticos Acá tienen 16 formas de lograr esquinas redondeadas con CSS (tags: css roundedcorners rounded+boxes rounded corners techniques webdesign webdev) [...]

  7. J.v.C - Gravatar

    J.v.C

    28-07-2007

    Permalink

    ME parecio una muy buena información, Saludos!!

  8. Excelente artículo!

  9. Pablo Juan - Gravatar

    Pablo Juan

    28-07-2007

    Permalink

    Gracias, estoy empezando a usa css y me parece excelente.

  10. [...] para tablas. Como se hace??? Fijate si este post te sirve, es para hacer esquinas redondeadas http://www.xyberneticos.com/index.ph…eadas-con-css/ [...]

  11. [...] Si has llegado a este post a trabes de google es posible que te interese mas esto: 16 técnicas para lograr esquinas redondeadas con CSS. [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: