Borders & Radius

Last updated:

What are Borders and Radius?

Borders are lines or edges that can be applied to the perimeter of HTML elements, defining the boundaries of an element and adding visual separation or emphasis. Border Radiuses control the curvature of these borders, allowing you to create rounded corners on elements, which can soften the overall appearance and add a more modern, refined look to your design.

How it Works

Borders are an integral part of the Refoundry block settings, allowing you to visually define and enhance the edges of various elements on your website. Border settings give you the flexibility to customize the appearance of borders around blocks, buttons, images, and other elements directly within the editor.

The Border Radius setting allows you to control the roundness of the corners of an element, giving you the option to create softer, rounded edges or maintain sharp, square corners. You can specify a uniform radius for all corners or adjust each corner individually for a more custom look.

Borders

Border Width: You can adjust the thickness of the borders around your elements. This setting allows you to specify how thick or thin the border should be, enabling you to create subtle or bold outlines that suit your design needs.

Border Style: Refoundry provides several border styles to choose from, such as solid, dashed, dotted, and more. This allows you to select the visual effect that best complements your design, whether you’re looking for a simple, clean look or something more decorative.

Border Color: The color setting enables you to choose the exact color for your borders using the Refoundry color picker. This ensures that the borders integrate seamlessly with your site’s color scheme, whether you need them to stand out or blend in with the background.

Individual Side Control: In Refoundry, you can apply different border settings to each side of an element (top, right, bottom, left). This allows for advanced customization, such as applying a border to only one side of an element or using different styles on different sides.

Border settings are available in the block settings panel for any element where borders are applicable. You can easily adjust these settings within the visual editor, making real-time changes to your design. Once you’ve customized the border width, style, and color, the changes will be applied immediately to the selected element, allowing you to see the results as you edit.

Border Radius

Uniform Radius: Apply the same curvature to all four corners, creating a consistent, rounded effect.

Individual Corner Control: Customize the radius for each corner separately, allowing for unique shapes and designs.

These Border and Border Radius settings in Refoundry offer powerful design tools that help you create visually distinct elements, adding depth and personality to your website. They are easily accessible and adjustable directly within the editor, making it simple to achieve the precise look and feel you want for your site.

Related
Resources

Find more support docs in this specific category, or just level up your Refoundry knowledge with deeper reading.

All Support Resources

Try Now for Free

Not yet a Refoundry client? Download the plugin and get started building better sites today!

Get Refoundry

Contact Support

Can’t find what you’re looking for? Reach out any time, and one of our real humans will respond.

Contact Support