CSS border-start-end-radius

The border-start-end-radius property in CSS allows you to set the radius of the corners of an element based on its writing mode. This property is particularly useful for creating more visually appealing user interfaces, especially in multilingual websites where text direction can vary.

The border-start-end-radius property is a shorthand for setting the border-start-start-radius and border-end-end-radius properties at the same time. The values of these properties determine the radius of the border corners at the start and end of the element. Here is a simple example to demonstrate how the border-start-end-radius property works:

    <div style="border-start-end-radius: 10px 20px 30px 40px; background-color: lightblue; padding: 20px;">
      This is a sample text inside a div with custom border radius.
    </div>
  

In the example above, the border-start-end-radius property is set to 10px 20px 30px 40px. This means that the top-left and bottom-right corners will have a radius of 10px, while the top-right and bottom-left corners will have a radius of 30px and 40px, respectively.

You can adjust the values of the border-start-end-radius property to achieve different corner radius combinations based on your design requirements.