Esquinas redondeadas en CSS sin imágenes ni javascript

square round corners

Sin entrar en detalles sólo les voy a pegar el código con algunos comentarios, y les voy a dejar las demostraciones, ya que el código está muy claro.

Hay una forma muy «bruta» de hacerlo, que valida CSS y funciona en muchos navegadores:

	<style type="text/css">
	div#rounded-box1 {background:transparent;margin:2em auto;padding:0;width:400px;}
	.rb4 {background:#d40000;margin:0 auto;padding:0;width:398px;height:3px;}
	.rb3 {background:#d40000;margin:0 auto;padding:0;width:396px;height:2px;}
	.rb2 {background:#d40000;margin:0 auto;padding:0;width:392px;height:1px;}
	.rb1 {background:#d40000;margin:0 auto;padding:0;width:388px;height:1px;}
	.rb-content {background:#d40000;margin:0 auto;padding:0;width:400px;}
	.rb-content p {color:#fff;margin:0 14px;padding:0;}
	</style>
	<div id="rounded-box1">
	<div class="rb1"></div>
	<div class="rb2"></div>
	<div class="rb3"></div>
	<div class="rb4"></div>
	<div class="rb-content">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu
	arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut,
	volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla
	lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.</p>
	</div>
	<div class="rb4"></div>
	<div class="rb3"></div>
	<div class="rb2"></div>
	<div class="rb1"></div>
	</div>

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.

Otra forma es como sigue:

<style type="text/css">
div#rounded-box2 {background:#d40000;margin:0 auto;padding:0;width:400px;border-radius:7px;-moz-border-radius: 7px; -webkit-border-radius : 7px;}
div#rounded-box2 p {margin:0;padding:10px;color:#fff;}
</style>
<div id="rounded-box2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu
 sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat
quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus,
accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.

Finalmente les dejo un código css para crear esquinas redondeadas en varios navegadores:

/* Esquinas redondeadas */
border-radius:5px;

/*Descompuesta*/
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius = 10px; 
border-bottom-right-radius = 10px; 
	
/* Esquinas redondeadas en Firefox */
-moz-border-radius: 5px;  

/*Descompuesta*/
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft = 5px;  
-moz-border-radius-bottomright = 5px;  
        
	
/*Internet Explorer 8 */
-ms-border-radius: 5px;

/*Descompuesta*/
-ms-border-radius-topleft: 5px;  
-ms-border-radius-topright: 5px;
-ms-border-radius-bottomleft: 5px;  
-ms-border-radius-bottomright: 5px; 
	
/*Webkit y Safari */
-webkit-border-radius: 5px;

/*Descompuesta*/
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px;  
        
	
/* Konqueror */
-khtml-border-radius: 5px; 

/*Descompuesta*/
-khtml-border-radius-topleft: 5px;  
-khtml-border-radius-topright: 5px;  
-khtml-border-radius-bottomleft:5px;  
-khtml-border-radius-bottomright:5px;  

Fuentes: Berriart.com | Clubdesarrolladores.com

5 Comments
  1. marzo 4, 2012
  2. enero 6, 2012
    • enero 6, 2012
  3. febrero 11, 2011
    • febrero 11, 2011

Leave a Reply

Tu dirección de correo electrónico no será publicada.