properties
changelog

Border Radius

Set border radius for rounded corners on elements.

Usage:

  • @border rounded-*;
  • @border rounded-top-*;
  • @border rounded-right-*;
  • @border rounded-bottom-*;
  • @border rounded-left-*;
  • @border rounded-tl-*;
  • @border rounded-tr-*;
  • @border rounded-bl-*;
  • @border rounded-br-*;

Border Radius Scales

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

The radius scale is derived from config:

shilp.config.js
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.js
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;
colorstyle