Sukarelawan kami masih belum menterjemah artikel ini ke bahasa Melayu. Sertai kami dan bantu melaksanakannya!
Anda juga boleh membaca artikel ini dalam bahasa English (US).

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's 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;

For instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property.



Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

Formal syntax


<length-percentage> = <length> | <percentage>


HTML Content

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

CSS Content

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;


Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'border-start-end-radius' in that specification.
Editor's Draft Initial definition.
Initial value0
Applies toall 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.
Percentagesrefer to the corresponding dimension of the border box
Computed valuetwo absolute <length>s or <percentage>s
Animation typea length, percentage or calc();
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No


Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

Tag Dokumen dan Penyumbang

Penyumbang untuk halaman ini: mdnwebdocs-bot, chrisdavidmills, rachelandrew
Terakhir dikemaskini oleh: mdnwebdocs-bot,