Foros del Web » Creando para Internet » CSS »

Tutorial: Esquinas redondeadas con puro CSS

Estas en el tema de Tutorial: Esquinas redondeadas con puro CSS en el foro de CSS en Foros del Web. Cómo hacer esquinas redondeadas sólo con CSS. Hola panas. Hace poco estaba leyendo un libro sobre trucos CSS que por cierto se los recomiendo ampliamente ...
  #1 (permalink)  
Antiguo 16/06/2007, 08:53
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Tutorial: Esquinas redondeadas con puro CSS

Cómo hacer esquinas redondeadas sólo con CSS.

Hola panas. Hace poco estaba leyendo un libro sobre trucos CSS que por cierto se los recomiendo ampliamente (The CSS Anthology: 101 Essential Tips, Tricks & Hacks, por Rachel Andrew. Editorial SitePoint Pty. Ltd). Ahí se explicaba cómo hacer esquinas redondeadas, pero revisando el método que allí se utilizaba se me ocurrió uno más sencillo, utilizando una base similar a la descrita en dicho libro.

Como bien sabemos, es posible lograr el efecto de redondeado principalmente de 3 maneras: Con Javascript, muy bueno pero con los inconvenientes de la accesibilidad. Con el -moz-border-radius sería lo ideal, pero siendo parte de la futura recomendación CSS3, lamentablemente aún no es compatible con todo navegador. Y por último está el recurso de las imágenes, el cual viene siendo la opción más viable en el presente.

Con este procedimiento, el efecto que se obtiene es el mismo que el -moz-border-radius pero visible en todo navegador. Aparentemente el trabajo es tedioso, pero al final todo es cuestión de construir la primera esquina y de allí salen las demás. En el "experimento" trabajé con posicionamiento en lugar de márgenes y capas a lo largo (que era lo que decía el libro) y el resultado fue aún mejor, ya que -al igual que el moz-border- es posible hacer cambios de forma bastante sencilla, una vez el trabajo esté hecho. [ Ver ejemplo terminado ]

Para lo que sigue se utilizaron valores equivalentes a un -moz-border-radius con 16px.


1.- Lo primero que haremos será crear una capa con posicionamiento relativo que servirá de contenedor:

HTML:
Código:
<div id="contenedor"></div>
CSS:
Código:
#contenedor {
	width: 40%;
	position: relative;
	margin: 5ex auto;
	overflow: hidden;
}
Dentro de esta capa irá el cuadro con el borde principal. Podemos darle los estilos que deseemos sin temor alguno:

HTML:
Código:
<div id="contenedor">
	<div class="cuadro"></div>
</div>
CSS:
Código:
.cuadro {
	border: 1px solid #ccc;
	background: #fcfaf7;
	padding: 1em;
}
2.- Se preparan los estilos para las esquinas superior e Inferior. Como las mini-capas tendrán distintos anchos, los clasificamos en 1, 2 y 3px.

A las capas que conformarán las esquinas superiores les daremos un borde inferior y posicionamiento top: 0:
Código:
.sup-1px, .sup-2px, .sup-3px {
	border-bottom: solid #ccc;
	top: 0;
}
Hacemos exactamente lo contrario con la capa de las esquinas inferiores; les asignamos borde superior y posicionamiento bottom: 0:
Código:
.inf-1px, .inf-2px, .inf-3px {
	border-top: solid #ccc;
	bottom: 0;
}
Ahora el resto de los ajustes, los cuales abreviamos para no repetir estilos en cada clase:

Código:
.sup-1px, .sup-2px, .sup-3px,
.inf-1px, .inf-2px, .inf-3px {
	overflow: hidden;
	background: #fff;
	position: absolute;
}

.sup-1px, .inf-1px {
	width: 1px;
}

.sup-2px, .inf-2px {
	width: 2px;
}

.sup-3px, .inf-3px {
	width: 3px;
}
3.- Luego creamos los estilos que complementarán los datos necesarios para formar las mini-capas. La información es precisamente la que varía de un estilo en otro: posicionamiento horizontal, altura y ancho de borde.
Código:
.si-1 { height: 11px; left: 0; border-width: 0; }

.si-2 { height: 8px; left: 1px; border-width: 3px; }

.si-3 { height: 6px; left: 2px; border-width: 2px; }

.si-4 { height: 4px; left: 3px; border-width: 2px; }

.si-5 { height: 3px; left: 4px; border-width: 2px; }

.si-6 { height: 3px; left: 5px; border-width: 1px; }

.si-7 { height: 2px; left: 6px; border-width: 1px; }

.si-8 { height: 1px; left: 8px; border-width: 1px; }
Recordemos que más arriba les asignamos bordes a las capas, por lo cual se suma 1px a su altura total, es decir, si le asignamos valor de 10px en realidad mide 11 (10px + 1px de borde).

Combinamos entonces las clases .sup-[X]px y .si-[Nº] resultando algo así:
Código:
<div id="contenedor">
	<div class="cuadro">
	<!-- Comienza Esquina Izquierda -->
		<div class="sup-1px si-1"></div>
		<div class="sup-1px si-2"></div>
		<div class="sup-1px si-3"></div>
		<div class="sup-1px si-4"></div>
		<div class="sup-1px si-5"></div>
		<div class="sup-1px si-6"></div>
		<div class="sup-2px si-7"></div>
		<div class="sup-3px si-8"></div>
	</div>
</div>
Ya tenemos nuestra esquina izquierda. Ahora todo es cuestión de cambiarles las posiciones Left > Right para construir las demás (y por supuesto también cambiamos los nombres de los selectores por los que correspondan).

A las capas de las esquinas inferiores les asignaremos la clase .inf-[X]px, junto con las clases inferiores. [Ver CSS terminado ].

5.- Como siempre el aguafiestas de IE sale al baile con sus remedos de estándares y le arreglamos el bug que tiene con los píxeles de la derecha y abajo [ Ver CSS de IE ].

Para más detalles podemos ver el código fuente del ejemplo. Alguna información de estilos (si-x, sd-x, ii-x, id-x) presenta redundancia, pero no quise comprimirlo más, ya que como está se puede leer y comprender con más facilidad. Sin embargo, la carga en bytes no supera los 4.8kb entre HTML y CSS.

Beneficios de este método

Antes de los beneficios abordemos el punto en contra: 32 capas por cuadro no es precisamente algo del gusto de muchos. Quizás exista una forma más abreviada de hacer el trabajito. Particularmente estuve dándole vueltas al asunto y ese fue el menor número que pude conseguir (al principio lo había logrado con 16 capas por esquina = 64).

No obstante, los pro que le veo a esta técnica son varios. Podemos usar las mismas clases para múltiples cuadros y al mismo tiempo asignarles fácilmente colores y bordes distintos sin necesidad de tocar los bloques (si-x, sd-x, ii-x, id-x), a menos que deseemos distintos radios de curvatura. Podemos además insertar fondos (tipo cabezal), quedando éstos "embebidos" automáticamente por las curvas, ya que las mini-capas poseen, a su vez, fondos propios y tapan sus esquinas. Con el método del mencionado libro -al contrario- no era posible utilizar ese espacio superior e inferior, ya que las capas estaban dispuestas a lo largo y obstaculizaban el flujo del contenido.

Igualmente podemos disponer de todo el espacio del cuadro, ya que el posicionamiento absoluto no compromete la parte interna y los fondos de las mini-capas apuntan hacia afuera, no hacia adentro.

Es posible además agregar un fondo degradado a la "parte exterior" de las esquinas de arriba, en caso de que el fondo de la página tenga esa característica, si el márgen del contenedor tiene medidas absolutas y si el fondo es un repeat-y.

Finalmente también podemos enumerar entre los beneficios el hecho de haber resuelto con sólo CSS algo que usualmente depende de otros recursos =P.

Saludos.

Última edición por metacortex; 19/03/2008 a las 15:35 Razón: Modificar datos
  #2 (permalink)  
Antiguo 17/06/2007, 00:36
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Tutorial: Esquinas redondeadas con puro CSS

Excelente tutorial metacortex
Gracias por compartir la dedicación que has tenido!
Esto sí que es CSS puro y del bueno. Tendré que sentarme un rato y empezar a probarlo.

Saludos!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 18/06/2007, 15:45
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: Tutorial: Esquinas redondeadas con puro CSS

Ya agregué los enlaces Daniel Ulczyk. Si puedes dale un vistazo

Saludos.
  #4 (permalink)  
Antiguo 19/06/2007, 08:13
 
Fecha de Ingreso: diciembre-2005
Mensajes: 136
Antigüedad: 12 años
Puntos: 2
Re: Tutorial: Esquinas redondeadas con puro CSS

Tremendo tutorial. Gracias Metacortex.
__________________
http://www.egarahosting.com
Hosting y Dominios
  #5 (permalink)  
Antiguo 19/06/2007, 23:32
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Tutorial: Esquinas redondeadas con puro CSS

Estupendo tutorial, metacortex, me ha venido muy bien para un proyecto.

Muchas gracias por compartirlo.

Saludos
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #6 (permalink)  
Antiguo 03/06/2010, 13:13
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

buenos dias!

y disculpen yo se que este tema es mas viejo que yo, pero estaba usando esta tecnica para redondear bordes que me parece muy buena, lo que no puedo hacer es cambiar el color a las esquinas, es decir , si cambio el fondo a la pagina se echan de ver las esquinas.
a ver si me pueden ayudar

asi se ve


Última edición por walterfcr; 03/06/2010 a las 13:22
  #7 (permalink)  
Antiguo 03/06/2010, 13:27
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Hola Walter

Yo que tu mejor comienzo en un nuevo post. Ya para esta fecha hay nuevas técnicas para redondear esquinas. Por ejm
Código HTML:
hbox.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  /* the border will curve into a 'D' */
  -moz-border-radius: 0 200px 200px 0;
}
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #8 (permalink)  
Antiguo 03/06/2010, 13:29
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

gVenom, eso que pusiste es solo para Firefox, ¿Qué hay de los demás navegadores?

Saludos
__________________
Grupo Telegram Docker en Español
  #9 (permalink)  
Antiguo 03/06/2010, 13:34
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
De acuerdo Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Cita:
Iniciado por Carlangueitor Ver Mensaje
gVenom, eso que pusiste es solo para Firefox, ¿Qué hay de los demás navegadores?

Saludos
Para todos hay mi amigo, para todos hay

-moz-border-radius: 10px 10px 10px 10px; Mozilla
-webkit-border-radius:50px 50px 50px 50px; Safary
-ms-border-radius:50px 50px 50px 50px; IE8
behavior:url(css/border-radius.htc); IE6

En IE6, hay que incluir un archivo htc
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #10 (permalink)  
Antiguo 03/06/2010, 13:36
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Cita:
Iniciado por gVenom Ver Mensaje
Para todos hay mi amigo, para todos hay

-moz-border-radius: 10px 10px 10px 10px; Mozilla
-webkit-border-radius:50px 50px 50px 50px; Safary
-ms-border-radius:50px 50px 50px 50px; IE8
behavior:url(css/border-radius.htc); IE6, hay que

En IE6, hay que incluir un archivo htc
Si, solo que no los habías puesto y luego confundes al pibe

Saludos
__________________
Grupo Telegram Docker en Español
  #11 (permalink)  
Antiguo 04/06/2010, 12:11
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

ammm

¬¬ (hay que leer bien el primer post)

Cita:
Como bien sabemos, es posible lograr el efecto de redondeado principalmente de 3 maneras: Con Javascript, muy bueno pero con los inconvenientes de la accesibilidad. Con el -moz-border-radius sería lo ideal, pero siendo parte de la futura recomendación CSS3, lamentablemente aún no es compatible con todo navegador
aunque yo prefiero los futuros estandares border-radius esto es una buena idea y algo alternativo a las demas

por cierto el htc para IE no lo recomiendo ya que solo obedece a una sola medida (8px)
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #12 (permalink)  
Antiguo 04/06/2010, 13:54
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Cita:
Iniciado por danneg Ver Mensaje
ammm

¬¬ (hay que leer bien el primer post)



aunque yo prefiero los futuros estandares border-radius esto es una buena idea y algo alternativo a las demas

por cierto el htc para IE no lo recomiendo ya que solo obedece a una sola medida (8px)
También hay que leer la fecha del post, a estas alturas el panorama ha cambiado.

Saludos
__________________
Grupo Telegram Docker en Español
  #13 (permalink)  
Antiguo 04/06/2010, 14:02
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Cita:
Iniciado por danneg Ver Mensaje
ammm
por cierto el htc para IE no lo recomiendo ya que solo obedece a una sola medida (8px)


Eso es solo para IE6, y o ni siquiera recomiendo el uso de IE6
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #14 (permalink)  
Antiguo 31/08/2010, 10:18
 
Fecha de Ingreso: julio-2003
Mensajes: 40
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Muchas gracias a todos los que habéis escrito en este apartado, realmente muy interesante. Ahora los probaré, solo una pregunta para chrome tambíen funciona?

-moz-border-radius: 10px 10px 10px 10px; Mozilla
-webkit-border-radius:50px 50px 50px 50px; Safary
-ms-border-radius:50px 50px 50px 50px; IE8
behavior:url(css/border-radius.htc); IE6,

Saludos!
  #15 (permalink)  
Antiguo 31/08/2010, 10:27
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

para chrome funciona asi

border-radius: 50px;
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #16 (permalink)  
Antiguo 31/08/2010, 11:34
 
Fecha de Ingreso: julio-2003
Mensajes: 40
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Danneg muchas gracias. En crhome va perfecto falta añadir - al principio -border-radius: 50px;
Tengo problemas con IE8 no se redondean "-ms-border-radius:50px 50px 50px 50px; " no me ha funcionado a alguien más le pasa? Gracias!
  #17 (permalink)  
Antiguo 31/08/2010, 13:14
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

bueno, en chrome tanto como opera ya no hace falta añadir el prefijo -o- ni -webkit- por que ya soportan corectamente la propiedad

en ie nunca podras hacer algo parecido con solo css, pera eso hay codigos js en la red, te proporcionare uno, utilizando jquery

http://jquery.malsup.com/corner/

ese funciona bien con ie, pero aclaro, te recomieno solo usarlo para ie, ya que paralos demas navegadores, si funciona pero pierde su optimizacion
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #18 (permalink)  
Antiguo 31/08/2010, 23:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Cita:
Iniciado por danneg Ver Mensaje
bueno, en chrome tanto como opera ya no hace falta añadir el prefijo -o- ni -webkit- por que ya soportan corectamente la propiedad

en ie nunca podras hacer algo parecido con solo css, pera eso hay codigos js en la red, te proporcionare uno, utilizando jquery

http://jquery.malsup.com/corner/

ese funciona bien con ie, pero aclaro, te recomieno solo usarlo para ie, ya que paralos demas navegadores, si funciona pero pierde su optimizacion
Bueno nunca, nunca?... tampoco... supongo que este plugin de jquery como otros que existen, crean miles de divs para simular esta propiedad CSS3, asi que si se puede con CSS solo que no hay una propiedad especifica
PD: las imagenes no muerden
----
EDITO:
PD: el mismo post lo hace solo con CSS
  #19 (permalink)  
Antiguo 01/09/2010, 10:10
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 3 meses
Puntos: 48
Respuesta: Tutorial: Esquinas redondeadas con puro CSS

a eso es a lo que me referia, que no existe tal propiedad como -ms-border-radius

pero he visto como funciona en ie9 y pues la verdad estoy conforme con lo que hace

pero solo bastara que todos quienes usan ie utilizen su ultima vercion

yo en lo personal prefiero que ie se quede sin esquinas redondeadas mientras que los demas navegadores disfruten de esta propiedad
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #20 (permalink)  
Antiguo 01/09/2010, 11:25
 
Fecha de Ingreso: julio-2003
Mensajes: 40
Antigüedad: 14 años, 4 meses
Puntos: 0
Sonrisa Respuesta: Tutorial: Esquinas redondeadas con puro CSS

Muchas gracias a los dos!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 22:17.