Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad border-top-left-radius
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Radio de la esquina superior izquierda del borde Con sintaxis y ejemplos.
describir
La propiedad CSS border-top-left-radius define las esquinas redondeadas a la izquierda del borde superior del cuadro.
sintaxis
La sintaxis de la propiedad CSS border-top-left-radius es:
border-top-left-radius: value;parámetro o parámetro
valor
El valor del radio aplicado al lado izquierdo del borde superior del cuadro. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … div {borde superior izquierdo radio: 3px; } |
| porcentaje | valor porcentual div {radio superior izquierdo del borde: 5%; } |
| heredar | El elemento heredará el radio de la esquina superior izquierda de su elemento principal div { borde-superior-izquierda-radio: heredar; } |
notas
- Consulte también las propiedades border-top-right-radius y border-radius.
Compatibilidad del navegador
La propiedad CSS border-top-left-radius tiene soporte básico para los siguientes navegadores:
- cromo 4
- Firefox 4+ (Geco 2+)
- Internet Explorer 9+ (IE 9+)
- Ópera 10.5+
- Safari 5+ (WebKit 3+)
ejemplo
Discutiremos la propiedad border-top-left-radius a continuación, explorando ejemplos de cómo usarla en CSS.
Veamos un ejemplo de un radio superior izquierdo de borde CSS donde proporcionamos un valor fijo.
p { border-top-left-radius: 5px; border-top-style: solid; }En este ejemplo de CSS border-top-left-radius, estamos en
El lado izquierdo del borde superior de la etiqueta define una esquina redondeada de 5px. Asegúrese de aplicar el estilo superior del borde para que aparezca el borde.
A continuación, veremos un ejemplo del radio superior izquierdo del borde CSS en el que proporcionamos un valor porcentual.
p { border-top-left-radius: 12%; border-top-style: solid; }En este ejemplo de CSS border-top-left-radius, definimos una esquina redondeada al 12 % en el lado izquierdo del borde superior.