Border Radius

Border Radius Scales

Shilp CSS uses a single base radius variable: --radius: theme(spacing-1);

The radius scale is derived from config:

shilp.config.jscopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  extend: {
    theme: {
      borderRadius: {
        radius: {
          0: 0,
          // NOTE: small radius can be added manually
          DEFAULT: "var(--radius)", // 4px
          md: "calc(var(--radius) * 1.5)", // 6px
          lg: "calc(var(--radius) * 2)", // 8px
          xl: "calc(var(--radius) * 3)", // 12px
          // NOTE: always fully rounded untill explicitely set to 0
          full: "calc(infinity * 1px)",
        },
      },
    },
  },
};

export default shilpConfig;

Change --radius once and every rounded element updates. This keeps curvature consistent across the system.

Important Note

1. The unit of --radius is inferred automatically
   • If you use px, it scales in px
   • If you use rem, it scales in rem
   • Default: theme(spacing-1) = 0.25rem → equals 4px when 1rem = 16px
2. Small custom radius values can be added manually
3. full creates a completely rounded shape
   • height and width need to be in the matching ratio to take the effect
4. Setting radius to 0 removes rounding entirely
   • full token stays rounded unless explicitly set to 0

Reference

shilp.config.jscopy to clipboard
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    border: {
      rounded: {
        DEFAULT: {
          property: "border-radius: <v><i>;",
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        tl: {
          property: "border-top-left-radius: <v><i>;",
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        tr: {
          property: "border-top-right-radius: <v><i>;",
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        br: {
          property: "border-bottom-right-radius: <v><i>;",
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        bl: {
          property: "border-bottom-left-radius: <v><i>;",
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        top: {
          property: `
						border-top-left-radius: <v><i>;
						border-top-right-radius: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        left: {
          property: `
						border-top-left-radius: <v><i>;
						border-bottom-left-radius: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        bottom: {
          property: `
						border-bottom-left-radius: <v><i>;
						border-bottom-right-radius: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
        right: {
          property: `
						border-top-right-radius: <v><i>;
						border-bottom-right-radius: <v><i>;
					`,
          resolve: "spacing",
          themeKey: "radius",
          values: {},
        },
      },
    },
  },
};

export default shilpConfig;