Esquinas redondeadas sin imágenes, solo con CSS

En este post vamos a ver como se redondean las esquinas de las capas, sin necesidad de utilizar imágenes en el código HTML, lo haremos únicamente con CSS.

¿Qué ventajas tiene esto?

Pues bien, son pocas pero con consistencia:

• Nos ahorramos el subir 4 imágenes, una por cada esquina de la capa.
• Con lo que nos ahorramos también insertarlas en el código HTML.
• Al ser un HTML sin imágenes, el blog o la web pesará menos.
• Al pesar menos carga mucho más rápido.

Estas son las líneas que vamos a utilizar:

• border-radius: Xpx;

En CSS3 obtenemos las esquinas redondeadas con border-radius, actualmente obtenemos lo mismo en los navegadores que usan el motor de renderizado Gecko (Firefox, Mozilla, Netscape, Galeon, Epiphany, Camino, Flock, etc), aumentando sólo -moz- al inicio del mismo código:

• -moz-border-radius: Xpx;
• Para Safari: -webkit-border-radius: Xpx;

Donde X seran los pixels que queramos darle de curvatura a las esquinas.

Pedimos que se implementen estas novedades en la próxima versión de Internet Explorer, pero ellos nos hacen oídos sordos, y se van por lo que es más fácil … para ellos, osea continuar redondeando esquinas con tablas y cuatro imágenes, algo muy tedioso y que no se soluciona con una linea o dos como aquí.

Si has llegado hasta aquí y aún usas Internet Explorer … no esperes más en abandonarlo y usar un navegador que se preocupa por respetar estándares.

Ejemplo 1:

¿Cómo lo he hecho?

 <!-- CODIGO CSS -->
 
 <style>
 .esquinasRedondasA {
       font-size: 1.5em;
 	margin: 0 20px 30px;
       padding: 20px 20px 20px 20px;
 	color:#fff;
 	background: blue;
 	min-height:50px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 }
 * html .esquinasRedondasA {
 	height:50px; /* Hack IE6*/
 }
 </style>
 
 <!-- CODIGO HTML -->
 
 <div  class="esquinasRedondasA">Capa única con las esquinas redondeadas.</div>
 

Ejemplo 2:

¿Cómo lo he hecho?

 <!-- CODIGO CSS -->
 
 <style>
 .esquinasRedondas {
 	margin: 0 20px 30px;
       padding: 20px 20px 20px 20px;
 	color:#fff;
 	background: #f00;
 	min-height:200px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 }
 * html .esquinasRedondas {
 	height:200px; /* Hack IE6*/
 }
 .esquinasRedondas1 {
       font-size: 1.5em;
       float: none;
       color:#000;
 	background-color:#FFF;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 	min-height:144px;
 	padding:20px 10px 10px;
 }
 * html .esquinasRedondas1 {
 	height:144px; /* Hack IE6*/
 }
 </style>
 
 <!-- CODIGO HTML -->
 
 <div  class="esquinasRedondas">Esta capa es la primera en la que redondearemos las esquinas, la pintaremos de color rojo para diferenciarla de la segunda capa que será de color blanco.
 <br/><div class="esquinasRedondas1">
 Esta es la segunda capa, anidada dentro de la primera.
 </div>
 </div>
 

Avisos para los comentarios:
Todo comentario con lenguaje inapropiado, obsceno, que utilice palabras abusivas o que ofenda al administrador de este blog o a otras personas no será bienvenido, así que por favor, enriquece este post enviando tus comentarios, pero no hagas spam e intenta que sean relevantes con el contenido del mismo, si no es así seran eliminados

servido por Sir Refusenik 6 comentarios compártelo