Para este caso tomaremos nuestro ejemplo anterior a el cual le dimos como propiedades con una altura de 150px, un ancho de 250px y de color verde. Ahora le daremos la propiedad [ borde-radius ], la cual nos permite redondear las esquinas de nuestros div.
Teniendo en nustro archivo htlm, un div con una clase de nombre [ estilo_div ].
<html>
<head>
</head>
<body>
<div class="estilo_div"></div>
</body>
</html>
Nos dirijimos a nuestro archivo .css que en nuestro caso se llama [ estilo.css ], endonde vamos a trabajar.
Ahora vamos a redondearle las esquinas a nuestro DIV con la propiedad [ borde-radius ]. si deseamos darle un borde redondeado igual a nuestras 4 esquinas de el div colo caremos una sola medida que este ejemplo le daromos 15px.
.estilo_div{
background:#ff6600;
height:100px;
width:250;
}
Que nos arroja como resultado:Ahora vamos a redondearle las esquinas a nuestro DIV con la propiedad [ borde-radius ]. si deseamos darle un borde redondeado igual a nuestras 4 esquinas de el div colo caremos una sola medida que este ejemplo le daromos 15px.
.estilo_div{
background:#ff6600;
border-radius:15px;
height:100px;
width:250;
}
Que nos arroja como resultado:
Ahora bien si deseamos darle un borde redondeado diferente a nuestras 4 esqunas de el div, daremos 4 medidas diferentes: 15px 20px 30px 5px; las cuales nos darian.
15px : esquina superior izquierda.
20px : esquina suoperior derecha.
30px : esquina inferior derecha.
5px : esquina inferior izquierda.
.estilo_div{
background:#ff6600;
border-radius:15px 20px 30px 5px;
height:100px;
width:250;
}
0 comentarios :
Publicar un comentario