Border radius

Overview

Source: ./src/fragments/border-radius/OCBorderRadiusV1.mdx

Border radius

The border-radius utility provides CSS classes for rounded corners in consistent steps.

Skip to:

• Class naming convention
• Sizes
• Usage guidelines
• Accessibility

Class naming convention

Classes use the format {prefix}-{property}-{size}.

For example, oc-br-100 applies a border-radius of 8px.

Sizes

The following classes are available and map to these border-radius values:

Usage guidelines

Add the appropriate CSS class to any element to apply the desired border radius. For example, to apply an 8px border radius, use the oc-br-100 class:

<div class="oc-br-100">
  <!-- Content with 8px border radius -->
</div>

Find all usage examples in the Border radius demo.

Accessibility

See the accessibility documentation for general guidelines on making your content accessible.

Border radius (OCBorderRadiusV1.stories.ts)

Demo: Border radius

Story: fragments-border-radius--border-radius · tags:

{
  name: "Demo: Border radius",
  render: allBorderRadius
}