poner bordes redondeados a bloques

Submitted by admin on Tue, 05/31/2011 - 21:33

Una de las mejores librerías que he encontrado es CurvyCorners

http://www.curvycorners.net/

para mostrar bordes en IE5, IE6, IE7, IE8, IE9, Firefox, Chrome, Safari y Opera :)

Basta con instalar el módulo para Drupal

http://drupal.org/project/curvycorners

y en su settings poner las siguientes dos lineas

curvyCorners();
var curvyCornersVerbose = false;

¿Como funciona?

Bueno, después de poner esas dos líneas en la ventana de conf del módulo. Sólo basta comenzar a usar nuestra hoja de estilo, por ejemplo si nuestro bloque tiene el ID = #block-search-0

nuestro css debe quedar así

#block-search-0 {
border:solid 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

donde como se puede ver tenemos que indicar el borde que queremos para nuestro bloque. La librería se encargará automáticamente de hacer los bordes por nosotros :)

La ventaja de este enfoque es que podemos indicar bordes diferentes para las cuatro esquinas del bloque si se desea. Si tenemos dificultades para indicar la curvatura de cada esquina podemos usar está página para obtener el código CSS que necesitamos

http://border-radius.com/

Por ejemplo

#block-search-0 {
border:solid 1px #000;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 50px;
border-top-left-radius: 12px;
border-top-right-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 50px;
}

Adjunto las librerías de CurvyCorners porque a veces el sitio se cae.

Etiquetas:

Archivo: 
curvycorners.js.txt
curvycorners.src_.js.txt