AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Esquina redondeada CSS


Next Page >>
HTML images

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:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

 

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.

Ejemplo

<!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.

Ejemplo

<!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>

Nota:  La propiedad border-radius es en realidad una propiedad abreviada de las propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius.

 

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


Ejemplo

<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...