| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/es/docs/Web/CSS/Reference/Properties/border-start-start-radius | [Back] [Original] |
Get to know MDN better
Esta pgina ha sido traducida del ingls por la comunidad. Aprende ms y nete a la comunidad de MDN Web Docs.
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.
/* <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.
<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.
border-start-start-radius =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.
<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>
<div>
<p class="exampleText">Example</p>
</div>
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;
}
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # border-radius-properties |
border-top-left-radiuswriting-mode, direction, text-orientationThis page was last modified on 20 mar 2026 by MDN contributors.
-webkit-border-before-webkit-box-reflect-webkit-mask-box-image-webkit-mask-composite-webkit-mask-position-x-webkit-mask-position-y-webkit-mask-repeat-x-webkit-mask-repeat-y-webkit-tap-highlight-color-webkit-text-fill-color-webkit-text-security-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-calloutPropiedades personalizadas (--*): variables CSSaccent-coloralignment-baselineallanchor-nameanchor-scopeanimation-moz-appearance (-webkit-appearance)aspect-ratiobackdrop-filterbackface-visibilitybackgroundbaseline-shiftbaseline-sourceblock-sizeborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-shapeborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthborderbottomcaption-sidecaretclearclip-pathclip-ruleclipcolorcolumnscontaincontainer-namecontainer-typecontainercontent-visibilitycontentcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfill-opacityfill-rulefillfilterflexfloatflood-colorflood-opacityfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-palettefont-sizefont-size-adjustfont-smoothfont-stretchfont-stylefont-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightfont-widthfontforced-color-adjustframe-sizinggrid-gapgridhanging-punctuationheighthyphenate-characterhyphenate-limit-charshyphensinitial-letterinline-sizeinsetinteractivityinterpolate-sizeIsolationleftletter-spacinglighting-colorlink-parametersmarginmarker-webkit-maskmix-blend-modeoffsetopacityorderorphansoutlineoverflow (excedente)overlaypaddingpagepaint-orderpath-lengthperspective-originperspectivepointer-eventsposition-webkit-print-color-adjustquotesrreading-flowreading-orderresizerightrotaterulerxryscalescroll-behaviorscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-marker-groupscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namespeak-asstop-colorstop-opacitystroketab-sizetable-layouttext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-styletimeline-scopeToptouch-actiontransformtransitiontranslateunicode-bidi-moz-user-modifyuser-selectvector-effectvertical-alignvisibilitywhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingwriting-modexyz-indexzoom:active-view-transition:active-view-transition-type():active:any-link:-webkit-autofill:blank:buffering:checked:current:default:defined:dir():disabled:empty:enabled:first-child:first-of-type:first:focus-visible:focus-within:focus:fullscreen:future:has-slotted:has:heading:heading():host-context():host:host():hover:in-range:indeterminate:interest-source:interest-target:invalid:is():lang:last-child:last-of-type:left:link:local-link:modal:muted:not():only-child:only-of-type:open:optional:out-of-range:past:paused:picture-in-picture:placeholder-shown:playing:popover-open:read-only:read-write:required:right:root:scope:seeking:stalled:state():target:-moz-ui-invalid:user-valid:valid:visited:volume-locked:where():xr-overlay::-webkit-inner-spin-button::-webkit-meter-bar::-webkit-meter-even-less-good-value::-webkit-meter-inner-element::-webkit-meter-optimum-value::-webkit-meter-suboptimum-value::-webkit-progress-bar::-webkit-progress-inner-element::-webkit-progress-value::-webkit-scrollbar::-webkit-search-cancel-button::-webkit-search-results-button::-webkit-slider-runnable-track::-webkit-slider-thumb::after::backdrop::before (:before)::checkmark::column::cue::details-content::file-selector-button::first-letter (:first-letter)::first-line (:first-line)::grammar-error::highlight()::marker::part()::picker-icon::picker()::placeholder::search-text::selection::slotted()::spelling-error::target-text@charset@color-profile@container@counter-style@custom-media@document@font-face@font-feature-values@font-palette-values@function@import@keyframes@layer@media-moz-device-pixel-ratio-webkit-animation-webkit-device-pixel-ratio-webkit-transform-2d-webkit-transform-3d-webkit-transitionany-hoverany-pointeraspect-ratiocolorcolor-gamutcolor-indexdevice-aspect-ratiodevice-heightdevice-posturedevice-widthdisplay-modedynamic-rangeforced-colorsgridAlturahorizontal-viewport-segmentshoverinverted-colorsmonochromeorientationoverflow-blockoverflow-inlinepointerprefers-color-schemeprefers-contrastprefers-reduced-dataprefers-reduced-motionprefers-reduced-transparencyResolucinscanscriptingshapeupdatevertical-viewport-segmentsvideo-dynamic-rangewidth@namespace@page@position-try@property@scope@starting-style@supports@view-transition<absolute-size><alpha-value><angle-percentage><angle><axis><baseline-position><basic-shape><blend-mode><box-edge><calc-keyword><calc-sum><color-interpolation-method><color><content-distribution><content-position><corner-shape-value><custom-ident><dashed-function><dashed-ident><dimension><display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside><easing-function><filter-function><flex><frequency-percentage><frequency><generic-family><gradient><hex-color><hue-interpolation-method><hue><ident><image><integer><length-percentage><length><line-style><line-width><named-color><number><overflow-position><overflow><percentage><position-area><position><ratio><relative-size><resolution><rule-list><self-position><shape><string><system-color><text-edge><time-percentage><time><timeline-range-name>transform-functionurl()-moz-image-rectabs()acos()alpha()anchor-size()anchor()asin()atan()atan2()attrblur()brightness()calc-size()calccircle()clamp()color-mix()color()conic-gradient()contrast-color()contrast()cos()counter()counters()cross-fade()cubic-bezier()device-cmyk()drop-shadow()dynamic-range-limit-mix()element()ellipse()env()exp()fit-content()grayscale()hsl()hue-rotate()hwb()hypot()if()image-set()image()inset()invert()lab()lch()light-dark()linear-gradient()linear()log()matrix()matrix3d()max()min()minmax()mod()oklab()oklch()opacity()paint()param()path()perspective()polygon()pow()progress()radial-gradient()random()ray()rect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient()rgb()rotate()rotate3d()rotateX()rotateY()rotateZ()round()saturate()scale()scale3d()scaleX()scaleY()scaleZ()sepia()shape()sibling-count()sibling-index()sign()sin()skew()skewX()skewY()sqrt()steps()superellipse()symbols()tan()translate()translate3d()translateX()translateY()translateZ()type()url()var()xywh()Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |