CSS: propiedad border-top-left-radius

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.

(Visited 6 times, 1 visits today)