Adjusting Shapes & Layout

Border radius is one of the most powerful yet often overlooked design controls. It determines how rounded or sharp the corners of your page elements appear, and even a small adjustment can dramatically change the overall feel of your pages. Leenkies gives you a single border radius slider that applies consistently to all elements, ensuring a unified look across your entire page.

What Border Radius Controls

The border radius value affects every element on your page that has a defined shape. When you adjust the slider, the following elements all update together:

• Buttons -- Primary, secondary, and outline buttons all adopt the radius. This includes call-to-action buttons, add-to-cart buttons, and form submit buttons.
• Cards -- Product cards, appointment cards, and content container cards all reflect the radius on their corners.
• Form Inputs -- Text fields, dropdowns, textareas, and select menus all use the radius for their border corners.
• Avatars -- Profile images and avatar containers adjust their rounding. At very high radius values, square avatars approach a circular shape.
• Dropdowns and Popovers -- Dropdown menus, tooltips, and floating panels all match the global radius setting.
• Images and Media -- Image containers and media blocks apply the radius to their corners, giving photos and thumbnails a consistent shape treatment.
• Badges and Tags -- Status badges, category tags, and labels follow the radius for their pill or rounded-rectangle shape.

The Border Radius Slider

Adjusting the border radius is done through a simple slider in the theme editor:

1. Open the Theme tab in your page editor.
2. Scroll to the Shapes section.
3. Use the Border Radius slider to set your desired value. The slider ranges from 0px (completely sharp corners) to 32px (heavily rounded corners).
4. Watch the live preview update in real time as you drag the slider. Every affected element on your page reflects the change immediately.
5. Click Save when you have found the right value.

Comparison of Different Values

Each range of border radius values creates a distinct visual personality. Here is how different values feel in practice:

0px -- Sharp and Angular

Completely square corners with no rounding at all. This creates a bold, structured, and editorial feel. Sharp corners convey precision and seriousness. They work well for news sites, corporate brands, and designs inspired by print media.

4-8px -- Subtle and Professional

A slight softening of the corners that removes the harshness of sharp edges without looking overtly rounded. This is the most common range for professional websites and SaaS applications. It feels polished and modern without drawing attention to the shape itself.

12-16px -- Friendly and Approachable

Noticeably rounded corners that give your page a welcoming, contemporary feel. This range is popular with consumer-facing brands, creative portfolios, and lifestyle businesses. The rounding is visible enough to contribute to the personality of the design.

24-32px -- Playful and Bold

Heavily rounded corners that create pill-shaped buttons and very soft card edges. This range makes a strong design statement and works well for creative brands, children's products, and designs that want to feel fun, casual, and approachable. At 32px, smaller elements like buttons become fully pill-shaped.

Pro Tip: If you are unsure where to start, try 12px. It is a versatile middle ground that works well for most brands and content types. You can always adjust up or down from there based on the personality you want to project.

Choosing the Right Value for Your Brand

Consider these guidelines when selecting a border radius:

• Match your brand personality. A law firm or financial advisor might use 0-4px for a serious, trustworthy feel. A yoga instructor or children's brand might use 16-24px for warmth and approachability.
• Consider your content type. Pages with lots of structured data (pricing tables, comparison grids) often benefit from lower radius values that maintain clear edges. Pages focused on lifestyle imagery and storytelling can embrace higher values.
• Stay consistent. The global radius setting ensures consistency, which is one of its biggest strengths. Resist the urge to wish for different radii on different elements -- the unified look is more professional than a mix of shapes.
• Preview with your actual content. The ideal radius depends on your specific combination of colors, fonts, images, and content. Always check the live preview with real content before committing.

Pro Tip: Border radius interacts with your color choices. Rounded cards with soft pastel backgrounds feel completely different from rounded cards with bold, saturated backgrounds. If you change your colors significantly, revisit your border radius to make sure the combination still feels right.