[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/es/docs/Web/CSS/Reference/Properties/border-start-start-radius [Back]  [Original]

border-start-start-radius - CSS | MDN

Esta pgina ha sido traducida del ingls por la comunidad. Aprende ms y nete a la comunidad de MDN Web Docs.

View in English Always switch to English

border-start-start-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since septiembre de 2021.

Experimental: Esta es una tecnologa experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en produccin.

La propiedad de CSS border-start-start-radius define al radio del borde lgico de un elemento, que se asigna al radio de borde fsico dependiendo del modo de escritura, la direccionalidad y la orientacin del texto del elemento. Esto corresponde a las propiedades writing-mode, direction, y text-orientation.

css
/* <length> values */
/* With one value the corner will be a circle */
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/* With two values the corner will be an ellipse */
border-start-start-radius: 1em 2em;

/* Global values */
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: unset;

Por ejemplo, en un modo de escritura horizontal-tb, esta propiedad corresponde a la propiedad border-top-left-radius.

In this article

Sintaxis

Valores

<length-percentage>

Indica el tamao del radio del crculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS <length>. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son vlidos.

Sintaxis formal

border-start-start-radius = 
<border-radius>

<border-radius> =
<slash-separated-border-radius-syntax> |
<legacy-border-radius-syntax>

<slash-separated-border-radius-syntax> =
<length-percentage [0,]> [ / <length-percentage [0,]> ]?

<legacy-border-radius-syntax> =
<length-percentage [0,]>{1,2}

<length-percentage> =
<length> |
<percentage>
Esta sintaxis refleja el estndar ms reciente segn CSS Borders and Box Decorations Module Level 4, CSS Values and Units Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener informacin de soporte.

Ejemplo

Contenido HTML

html
<div>
  <p class="exampleText">Example</p>
</div>

Contenido CSS

css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}

Especificaciones

Specification
CSS Logical Properties and Values Module Level 1
# border-radius-properties

Compatibilidad con navegadores

Mira tambin


Web Proxy Viewer  |  New URL  |  Original Page