CSS border-bottom-left-radius Propiedad
Ejemplo
Agregue bordes redondeados a la esquina inferior izquierda de dos elementos <div>:
#example1 {
border: 2px solid red;
border-bottom-left-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-left-radius: 50px
20px;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La border-bottom-left-radius
propiedad define el radio de la esquina inferior izquierda.
Sugerencia: ¡Esta propiedad le permite agregar bordes redondeados a los elementos!
Valor por defecto: | 0 |
---|---|
Heredado: | No |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.borderBottomLeftRadius="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-bottom-left-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintaxis CSS
border-bottom-left-radius: length|% [length|%]|initial|inherit;
Nota: si establece dos valores, el primero es para el borde inferior y el segundo para el borde izquierdo. Si se omite el segundo valor, se copia del primero. Si cualquiera de las longitudes es cero, la esquina es cuadrada, no redondeada.
Valores de propiedad
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-left corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-left corner 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
Agregue bordes redondeados a la esquina inferior izquierda en porcentaje:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-left-radius: 40%;
}
páginas relacionadas
Tutorial de CSS: esquinas redondeadas de CSS
Referencia HTML DOM: propiedad borderBottomLeftRadius