Esquina redondeada CSS
CSS Tutorial » Esquina redondeada CSS
La propiedad de CSS border-radius redondea las esquinas del borde del borde exterior de un elemento.
Puede establecer un solo radio para hacer esquinas circulares o dos radios para hacer esquinas elípticas.
Sintaxis:
Este elemento verde tiene un ancho de 300px, un alto de 150px, borde rojo border-radius:20px, solid, marjen amarillo de 10px y centrado en el centro.
Propiedad de esquina redondeada - border-radius
La propiedad border-radius de CSS define el radio de las esquinas de un elemento.
<!DOCTYPE html>
<html>
<head>
<style>
#esquina1 {
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
background-color: #C6EB94;
}#esquina2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}#esquina3 {
border-radius: 25px;
background: url(https://www.agernic.com/uploads/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body><h1>La propiedad border-radius</h1>
<p>Esquinas redondeadas para un elemento con un color de fondo específico:</p>
<p id="esquina1">¡Esquinas redondeadas!</p>
<p>Rounded corners for an element with a border:</p>
<p id="esquina2">¡Esquinas redondeadas!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="esquina3">¡Esquinas redondeadas!</p></body>
</html>
¡Esta propiedad le permite agregar esquinas redondeadas a los elementos!
Etiquetas: css esquina redondeada, css border esquinas redondeadas, css3 div esquinas redondeadas, esquina redonda css, redondear esquina css
CSS border-radius: especificar cada esquina
La propiedad border-radius se especifica como:
1. uno, dos, tres o cuatro valores de <length> or <percentage>.
Se utiliza para establecer un solo radio para las esquinas
2. seguido opcionalmente por "/" y uno, dos, tres o cuatro valores de <length> or <percentage>.
Esto se usa para establecer un radio adicional, por lo que puede tener esquinas elípticas.
<!DOCTYPE html>
<html>
<head>
<style>
/* The syntax of the first radius allows one to four values */
#esquina1{
/* Radius is set for all 4 sides */
border-radius: 15px;
height: 150px;
width: 300px;
background-color: #FF9;
padding: 10px;
}
#esquina2{
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;
background-color: #CFF;
height: 150px;
width: 300px;
padding: 10px;
}
#esquina3{
/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 20px 40px 20px;
background-color: #71FF95;
height: 150px;
width: 300px;
padding: 10px;
}
#esquina4{
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 0 30px 40px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CCC;
}
#esquina5{
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #C9F;
}
#esquina6{
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 15% / 20px 30px;
height: 150px;
width: 300px;
padding: 10px;
background-color: #0FF;
}
#esquina7{
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FFCACA;
}
#esquina8{
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 15% / 20px 25em 30px 35em;
height: 150px;
width: 300px;
padding: 10px;
background-color: #6F9;
}
#esquina9{
/* Global values */
border-radius: inherit;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FDB;
}
#esquina10{
border-radius: initial;
height: 150px;
width: 300px;
padding: 10px;
background-color: #CACAFF;
}
#esquina11{
border-radius: unset;
height: 150px;
width: 300px;
padding: 10px;
background-color: #FF8AFF;
}
</style>
</head>
<body><h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="esquina1">Rounded corners! esquina1<br />
<strong>Radius is set for all 4 sides</strong><br />
border-radius: 15px;<br />
height: 150px;<br />
width: 300px;<br />
background-color: #FF9;<br />
padding: 10px;</p>
<p id="esquina2">Rounded corners! esquina2<br />
<strong>top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 5%;<br />
background-color: #CFF;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="esquina3">Rounded corners! esquina3<br />
<strong>top-left | top-right-and-bottom-left | bottom-right</strong><br />
border-radius: 20px 40px 20px;<br />
background-color: #71FF95;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;</p>
<p id="esquina4">Rounded corners! esquina4<br />
<strong>top-left | top-right | bottom-right | bottom-left</strong><br />
border-radius: 10px 0 30px 40px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CCC;</p>
<p id="esquina5">Rounded corners! esquina5<br />
border-radius: 10px / 20px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #C9F;</p>
<p id="esquina6">Rounded corners! esquina6<br />
<strong>(first radius values) / top-left-and-bottom-right | top-right-and-bottom-left</strong><br />
border-radius: 10px 15% / 20px 30px;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #0FF;</p>
<p id="esquina7">Rounded corners! esquina7<br />
<strong>(first radius values) / top-left | top-right-and-bottom-left | bottom-right </strong><br />
border-radius: 10px 5px 2em / 20px 25px 30%;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FFCACA;</p>
<p id="esquina8">Rounded corners! esquina8<br />
<strong>(first radius values) / top-left | top-right | bottom-right | bottom-left </strong><br />
border-radius: 10px 15% / 20px 25em 30px 35em;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #6F9;</p>
<p id="esquina9">Rounded corners! esquina9<br />
<strong>Global values</strong><br />
border-radius: inherit;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FDB;<br />
}</p>
<p id="esquina10">Rounded corners! esquina10<br />
border-radius: initial;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #CACAFF;</p>
<p id="esquina11">Rounded corners! esquina11 <br />
border-radius: unset;<br />
height: 150px;<br />
width: 300px;<br />
padding: 10px;<br />
background-color: #FF8AFF;</p></body>
</html>
El prefijo -moz-
El navegador Firefox de Mozilla ha admitido la propiedad border-radius, con el prefijo -moz-, desde la versión 1.0. Sin embargo, es solo desde la versión 3.5 que el navegador ha permitido esquinas elípticas, es decir, aceptando dos valores por esquina para determinar los radios horizontal y vertical de forma independiente.
La única diferencia importante está en el nombre del borde individual - * - propiedades de radio, con las propiedades con el prefijo -moz- siguiendo una convención de nomenclatura ligeramente diferente de la siguiente manera:
| W3C Especificación | Implementación de Mozilla |
|---|---|
| border-radius | -moz-border-radius |
| border-top-left-radius | -moz-border-radius-topleft |
| border-top-right-radius | -moz-border-radius-topright |
| border-bottom-right-radius | -moz-border-radius-bottomright |
| border-bottom-left-radius | -moz-border-radius-bottomleft |
<!DOCTYPE html>
<html>
<head>
<style>
#Example_A {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;
}
#Example_B {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;
}#Example_C {
height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;
}#Example_D {
height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;
}
</style>
</head>
<body><h1>La propiedad border-radius</h1>
<p>Esquinas redondeadas para un elemento con un color de fondo específico:</p>
<p id="Example_A"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
background-color: #CCC;
padding: 10px;</p>
<p id="Example_B"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
background-color: #FF9;
padding: 10px;</p>
<p id="Example_C"> height: 160px;
width:300px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
background-color: #CCF;
padding: 10px;</p>
<p id="Example_D"> height: 15em;
width: 30em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-color: #0FF;
padding: 10px;</p></body>
</html>
Etiquetas: css esquina redondeada, css border esquinas redondeadas, css3 div esquinas redondeadas, esquina redonda css, redondear esquina css
Esquina redondeada CSS - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.