CSS border-start-start-radius A Comprehensive Guide

Introduction

The border-start-start-radius property in CSS lets you define a logical border radius on an element. It’s especially handy when you need styles that work well with different text orientations and writing modes. This property ensures your designs stay consistent and visually appealing, no matter the language or text direction.

Compatibility

The border-start-start-radius property is well-supported across major browsers. It has been available since September 2021, ensuring broad compatibility for web developers and designers. This property works seamlessly with different text orientations and writing modes, making it a versatile tool for creating consistent and visually appealing designs.

Description

The border-start-start-radius property allows you to define a logical border radius on an element. It specifically affects the corner between the block-start and the inline-start sides of the element. For example, in a horizontal writing mode with a left-to-right direction, border-start-start-radius corresponds to the border-top-left-radius property. This flexibility makes it a valuable tool for web developers and designers who need to create adaptable and responsive designs.

Syntax and Values

The border-start-start-radius property can be used with various values to define the border radius on an element.

Syntax

border-start-start-radius: <length> | <percentage>;

Values

1. Length: Specifies the radius in a specific length unit (e.g., px, em, rem).

   border-start-start-radius: 10px;
   border-start-start-radius: 1em;

2. Percentage: Specifies the radius as a percentage of the corresponding dimension of the border box.

   border-start-start-radius: 50%;

3. Two Values: When two values are provided, the corner will be an ellipse. The first value represents the semi-major axis, and the second value represents the semi-minor axis.

   border-start-start-radius: 1em 2em;

4. Global Values: The property also accepts global values such as inherit, initial, revert, revert-layer, and unset.

   border-start-start-radius: inherit;
   border-start-start-radius: initial;
   border-start-start-radius: revert;
   border-start-start-radius: revert-layer;
   border-start-start-radius: unset;

Examples

The border-start-start-radius property allows you to create rounded corners that adapt to different writing modes and text orientations. Here are some practical examples:

Example 1: Basic Usage

HTML:

<div class="box">
  <p>Basic Example</p>
</div>

CSS:

.box {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border-start-start-radius: 15px;
  padding: 10px;
}

Result: This creates a box with a rounded top-left corner.

Example 2: Using Percentages

HTML:

<div class="box">
  <p>Percentage Example</p>
</div>

CSS:

.box {
  background-color: lightcoral;
  width: 200px;
  height: 100px;
  border-start-start-radius: 20%;
  padding: 10px;
}

Result: This creates a box with a rounded top-left corner that is 20% of the element’s width and height.

Example 3: Elliptical Corners

HTML:

<div class="box">
  <p>Elliptical Example</p>
</div>

CSS:

.box {
  background-color: lightgreen;
  width: 200px;
  height: 100px;
  border-start-start-radius: 15px 30px;
  padding: 10px;
}

Result: This creates a box with an elliptical top-left corner.

Example 4: Vertical Text with Rounded Corners

HTML:

<div class="vertical-box">
  <p class="vertical-text">Vertical Text Example</p>
</div>

CSS:

.vertical-box {
  background-color: lightgoldenrodyellow;
  width: 150px;
  height: 200px;
  border-start-start-radius: 15px;
  padding: 10px;
}

.vertical-text {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: white;
  border-start-start-radius: 15px;
}

Result: This creates a box with vertical text and a rounded top-left corner that adapts to the vertical writing mode.

Specifications

The border-start-start-radius property is defined in the CSS Logical Properties and Values Level 1 specification. This specification outlines the behavior and usage of logical properties, which are designed to work seamlessly with different writing modes and text orientations.

Specification Details

• Specification Name: CSS Logical Properties and Values Level 1
• Section: border-radius-properties
• Link: ( WebsiteUrl )

Browser Compatibility

The border-start-start-radius property is well-supported across a wide range of web browsers, ensuring that your designs will work consistently across different platforms and devices.

Desktop Browsers

• Google Chrome: Supported since version 91.
• Mozilla Firefox: Supported since version 89.
• Microsoft Edge: Supported since version 91.
• Safari: Supported since version 15.

Mobile Browsers

• Chrome for Android: Supported since version 91.
• Firefox for Android: Supported since version 89.
• Safari on iOS: Supported since version 15.
• Samsung Internet: Supported since version 14.

Additional Notes

• Opera: Supported since version 77.
• Internet Explorer: Not supported.

For the most up-to-date and detailed compatibility information, refer to the browser compatibility tables provided in this article.

See Also

For further reading and related topics, you may find the following resources helpful:

• CSS Logical Properties and Values
• The mapped physical property: border-top-left-radius
• writing-mode
• direction
• text-orientation

These resources provide additional context and information on related CSS properties and concepts, helping you to deepen your understanding and mastery of web design and development.