CSS

Bordes redondeados en CSS

CSS o Hoja de estilo en cascada sirve para definir la presentación de un documento estructurado escrito en HTML. En este tutorial aprenderemos a realizar bordes redondeados en CSS, esto se puede aplicar en cualquier etiqueta o incluso en imágenes.

¿Cómo hacer bordes redondeados en CSS?

Para hacer esto en CSS solamente tenemos que utilizar la propiedad border-radius con la cantidad de píxeles, según nuestra necesidad. El siguiente ejemplo muestra un cuadrado rojo con bordes de 20px:

<!DOCTYPE html>
<html>
  <head>
    <title>Bordes redondeados en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style>
	  #cuadrado{
	    background:red;
		width: 200px;
		height: 200px;
	  }
	  
	  .borde{
	    border-radius: 25px;
	  }
	</style>
  </head>
  <body>
    <div id="cuadrado" class="borde">
	
    </div>
  </body>
</html>

El resultado del código anterior sería:

Cuadrado con bordes redondeados

Cuadrado con bordes redondeados

Esta propiedad nos permite realizar círculos, para esto solo tenemos que poner 100px en el border-radius de la clase borde y nuestro círculo se visualizaría de la siguiente forma:

Círculo en CSS

Círculo en CSS

Una herramienta que les puede ser de gran utilidad para crear bordes redondeados en CSS es http://border-radius.com.
Bueno gente hemos llegado al final de este breve tutorial, espero que les sea de gran utilidad. Ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *