Border Radius

How to edit the border radius of an element in CodyFrame.

Classes #

Border-radius utility classes:

CSS Class	Description
`r{p}adius-sm`	border-radius: var(--radius-sm, 0.1875em);
`r{p}adius-md`	border-radius: var(--radius-md, 0.375em);
`r{p}adius-lg`	border-radius: var(--radius-lg, 0.75em);
`r{p}adius-50%`	border-radius: 50%;
`r{p}adius-full`	border-radius: 50em;
`r{p}adius-inherit`	border-radius: inherit;
`r{p}adius-0`	border-radius: 0;
`r{p}adius-top-left-0`	border-top-left-radius: 0;
`r{p}adius-top-right-0`	border-top-right-radius: 0;
`r{p}adius-bottom-right-0`	border-bottom-right-radius: 0;
`r{p}adius-bottom-left-0`	border-bottom-left-radius: 0;

Here's a list of the default border-radius variables:

:root {
  --radius-sm: 0.1875em;
  --radius-md: 0.375em;
  --radius-lg: 0.75em;
}

To apply a border-radius value from the scale, use the variables in your CSS:

.component {
  border-radius: var(--radius-md);
}

In CodyFrame v4, you can edit the border-radius scale by passing a $border-radius map to the config module in your style.scss:

@use 'config' as * with (
  $border-radius: (
    'sm': '0.1875em',
    'md': '0.375em',
    'lg': '0.75em'
  )
);

In CodyFrame v3, you can override the border-radius variables in the custom-style/_shared-styles.scss file.