Blog
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:
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:
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.