Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La propiedad de CSS border-start-end-radius
define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades writing-mode
, direction
, and text-orientation
.
/* <length> values */
/* With one value the corner will be a circle */
border-start-end-radius: 10px;
border-start-end-radius: 1em;
/* With two values the corner will be an ellipse */
border-start-end-radius: 1em 2em;
/* Global values */
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: unset;
Por ejemplo, en un modo de escritura horizontal-tb
, esta propiedad corresponde a la propiedad border-bottom-left-radius
.
Sintaxis
Valores
<length-percentage>
- Indica el tamaño del radio del círculo 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 válidos.
Sintaxis formal
<length-percentage>{1,2}where
<length-percentage> = <length> | <percentage>
Ejemplo
Contenido HTML
<div>
<p class="exampleText">Example</p>
</div>
Contenido CSS
div {
background-color: rebeccapurple;
width: 120px;
height: 120px;
border-start-end-radius: 10px;
}
.exampleText {
writing-mode: vertical-rl;
padding: 10px;
background-color: #fff;
border-start-end-radius: 10px;
}
Especificación
Especificación | Estado | Comentario |
---|---|---|
CSS Logical Properties and Values Level 1 La definición de 'border-start-end-radius' en esta especificación. |
Editor's Draft | Definición inicial. |
Valor inicial | 0 |
---|---|
Applies to | all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter . |
Heredable | no |
Percentages | refer to the corresponding dimension of the border box |
Valor calculado | two absolute length s or percentage s |
Animation type | a length, percentage or calc(); |
Compatibilidad en navegadores
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Mira también
- La propiedad física asignada:
border-bottom-left-radius
writing-mode
,direction
,text-orientation