CSS - border-start-end-radius Property

Quiz

CSS border-start-end-radius property defines the radius of the corner between the block-start and inline-end sides of an element. The property is a logical border radius, which means that its value depends on the element's writing mode, direction, and text orientation.

Syntax

border-start-end-radius: 0 | length | percentage | initial | inherit;

Property Values

Value	Description
0	It shows no rounding effect. Default.
length	It defines the roundness of block-start and inline-end corner using length values.
percentage	It defines the roundness of block-start and inline-end corner using percentage values.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Start End Radius

The following examples explain the border-start-end-radius property with different values.

Border Start End Radius Property with Zero Value

To not have any rounding effect at the block-start and inline-end corner, we can use 0. In the following example, 0 value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         padding:20px;
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-start-end-radius: 0;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <div class="rounded-box">
      No rounded corner for block-start and inline-end corner.
   </div>
</body>

</html>

Border Start End Radius Property with Length Values

To have a rounding effect at the block-start and inline-end corner, we can specify the roundness in terms of length values (e.g. 10px, 20px 30px etc.). In the following example, length values have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 15px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-end-radius: 80px;
      }

      .rounded-box2 {
         border-start-end-radius: 80px 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Single Value: 80px (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-end corner with single value.
   </p>
   <h3>
   Two Values: 80px 80px (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-end corner with two values.
   </p>
</body>

</html>

Border Start End Radius Property with Percentage Values

To have a rounding effect at the block-start and inline-end corner, we can specify the roundness in terms of percentage values (e.g. 10%, 20% 30% etc.). In the following example, percentage values have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 15px;
         border: 3px solid red;
      }

      .rounded-box1 {
         border-start-end-radius: 50%;
      }

      .rounded-box2 {
         border-start-end-radius: 50% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Single Value: 50% (The corner will be a circle)
   </h3>
   <p class="boxes rounded-box1">
      Rounded corner for block-start and
      inline-end corner with single value.
   </p>
   <h3>
   Two Values: 50% 50% (The corner will be an ellipse)
   </h3>
   <p class="boxes rounded-box2">
      Rounded corner for block-start and
      inline-end corner with two values.
   </p>
</body>

</html>

Border Start End Radius Property with Direction

The direction parameter in the context of border-start-end-radius determines which corner is to be rounded. In the LTR direction, the top right corner is rounded while in RTL direction the top left corner is rounded. LTR is the default direction. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .boxes {
         width: 150px;
         height: 150px;
         padding: 20px;
         border: 3px solid red;
         border-start-end-radius: 120px 60px;
      }

      .right {
         direction: ltr;
      }

      .left {
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
      Left-to-Right direction: top right corner is rounded
   </h3>
   <p class=" boxes right">
      block-start and inline-end 
      rounded corner using direction: ltr
   </p>
   <h3>
      Right-to-Left direction: top left corner is rounded
   </h3>
   <p class="boxes left">
      block-start and inline-end 
      rounded corner using direction: rtl
   </p>
</body>

</html>

Border Start End Radius Property with Writing Mode

The border-start-end-radius property can be used with writing-mode: vertical-lr, it arranges text vertically from top to bottom and left to right. Similarly, with writing-mode: vertical-rl, it arranges text vertically from top to bottom and right to left. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box {
         width: 150px;
         height: 150px;
         padding: 20px;
         border: 3px solid red;
         margin: 10px;
         border-start-end-radius: 30%;
      }

      .top-left-lr {
         writing-mode: vertical-lr;
      }

      .top-left-rl {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-start-end-radius property
   </h2>
   <h3>
   Writing mode: vertical-lr
   </h3>
   <div class="rounded-box top-left-lr">
      block-start and inline-end rounded corner
      using vertical-lr.
   </div>
   <h3>
   Writing mode: vertical-rl
   </h3>
   <div class="rounded-box top-left-rl">
      block-start and inline-end rounded corner
      using vertical-rl.
   </div>
</body>

</html>

Note: The border-start-end-radius property can take upto two values, so depending on the number of values passed, the roundness of the corner will be decided.

One value: if one value is given to the property, the corner at the block-start and inline-end will be circular.
Two values: if two values are given to the property, the corner at the block-start and inline-end will be elliptical.

Supported Browsers

Property
border-start-end-radius	89.0	89.0	66.0	15.0	75.0

css_reference.htm

Print Page