CSS - border-end-start-radius Property

Quiz

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

Syntax

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

Property Values

Value	Description
0	It shows no rounding effect. Default.
length	It defines the roundness of block-end and inline-start corner using length values.
percentage	It defines the roundness of block-end and inline-start 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 End End Radius Property

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

Border End Start Radius with Zero Value

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Border End Start Radius with Length Value

To have a rounding effect at the end of the block and start of inline corner, we can use length values (eg. 10px) to specify the radius. In the following example, 80px value has been used.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
      .rounded-box1 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 80px;
      }

      .rounded-box2 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 80px 80px;
      }
    </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p class="rounded-box1">
      Rounded corner for block-end and inline-start 
      corner with single value.
   </p>
   <p class="rounded-box2">
      Rounded corner for block-end and inline-start 
      corner with two values.
   </p>
</body>

</html>

Border End Start Radius with Percentage Value

To have a rounding effect at the end of the block and start of inline corner, we can use percentage values (eg. 10%) to specify the radius. In the following example, 50% value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .rounded-box1 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 50%;
      }

      .rounded-box2 {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 50% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p class="rounded-box1">
      Rounded corner for block-end and inline-start 
      corner with single value.
   </p>
   <p class="rounded-box2">
      Rounded corner for block-end and inline-start 
      corner with two values.
   </p>
</body>

</html>

Border End Start Radius with Direction

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #right {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 120px 60px;
         direction: ltr;
      }

      #left {
         width: 150px;
         height: 150px;
         border: 3px solid green;
         border-end-start-radius: 120px 60px;
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-end-start-radius property
   </h2>
   <p id="right">
      block-end and inline-start rounded 
      corner using direction: ltr
   </p>
   <p id="left">
      block-end and inline-start rounded 
      corner using direction: rtl
   </p>
</body>

</html>

Border End Start Radius with Writing Mode

The border-end-start-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

<html>
<head>
<style>
   .rounded-box {
      width: 150px;
      height: 150px;
      border: 3px solid green;
      margin: 10px;
   }
   .top-left-lr {
      border-end-start-radius: 30%;
      writing-mode: vertical-lr;
   }
   .top-left-rl {
      border-end-start-radius: 30%;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <h2>
      CSS border-end-start-radius property</h2>
   <div class="rounded-box top-left-lr">
      block-end and inline-start rounded 
      corner using vertical-lr.
   </div>
   <div class="rounded-box top-left-rl">
      block-end and inline-start rounded 
      corner using vertical-rl.
   </div>
</body>
</html>

Supported Browsers

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

css_reference.htm

Print Page