Propiedad CSS border-radius
Ejemplo
Agregue esquinas redondeadas a dos elementos <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La border-radius
propiedad define el radio de las esquinas del elemento.
Sugerencia: ¡Esta propiedad le permite agregar esquinas redondeadas a los elementos!
Esta propiedad puede tener de uno a cuatro valores. Estas son las reglas:
Cuatro valores - border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda):
Tres valores - border-radius: 15px 50px 30px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda y el tercer valor se aplica a la esquina inferior derecha):
Dos valores - border-radius: 15px 50px; (el primer valor se aplica a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplica a las esquinas superior derecha e inferior izquierda):
Un valor - border-radius: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual:
Valor por defecto: | 0 |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.borderRadius="25px" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaxis CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Nota: Los cuatro valores para cada radio se dan en el orden superior izquierda, superior derecha, inferior derecha, inferior izquierda. Si se omite la parte inferior izquierda, es lo mismo que la parte superior derecha. Si se omite la parte inferior derecha, es lo mismo que la parte superior izquierda. Si se omite la parte superior derecha, es lo mismo que la parte superior izquierda.
Valores de propiedad
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Establecer esquinas redondeadas para un elemento con un color de fondo:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Ejemplo
Establecer esquinas redondeadas para un elemento con un borde:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Ejemplo
Establecer esquinas redondeadas para un elemento con una imagen de fondo:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Ejemplo
También nota esto:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; */
páginas relacionadas
Tutorial de CSS: esquinas redondeadas de CSS
Referencia HTML DOM: propiedad borderRadius