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.

Compartir esto:

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 *