How to Make Inverted Border Radius Card Using Elementor for FREE 2024

Creating an inverted border-radius card in Elementor Pro can give your design a unique and modern look. Here's how you can achieve this effect:

Create a New Section:
Start by creating a new section in your Elementor editor or editing an existing one.

Add a Column:
Inside the section, add a column by clicking on the "+ Add Column" button.

Add a Divider Widget:
Drag and drop the Divider widget into the column you just added. You can find the Divider widget under the "General" section of Elementor's widgets.

Configure Divider Settings:
In the Divider widget settings panel, you can adjust the following settings to achieve the inverted border-radius effect:

Type: Choose the "Line" type.
Color: Set the color of the divider to match the background color of your card.
Width: Adjust the width of the divider to control the thickness of the border.
Height: Set the height of the divider to control the height of the card.
Apply Border-Radius:
Now, to create the inverted border-radius effect, you'll need to apply a negative border-radius to the column containing the divider. To do this, add custom CSS to the column's Advanced Custom CSS settings:

css
Copy code
.your-column-class {
border-radius: -20px; /* Adjust the value as needed */
}
Add Content:
Inside the column, you can add content such as text, images, buttons, etc., to create the card's content. Drag and drop the desired widgets from the Elementor panel into the column.

Customize Styling:
Customize the styling of your content and divider to match your design preferences. You can adjust colors, typography, spacing, and more using Elementor's styling options.

Preview and Publish:
Once you're satisfied with your inverted border-radius card design, preview it to see how it looks. If everything looks good, click the "Publish" button to make your changes live on your website.

Track: Ripple - On Your Mind [NCS Release]
Music provided by NoCopyrightSounds.
Watch: http://ncs.lnk.to/OYMAT/youtube
Free Download / Stream: http://ncs.io/OYM

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

©️ Check out our Usage Policy on how to use NCS music in your videos: http://ncs.io/UsagePolicy

To request a commercial license visit: http://ncs.io/Commercial
NCS: Music Without Limitations.

Rec-ID: recMMBWjuhSGk1ebQ

Elementor Flexbox Container Tutorial

#Elementor #elementorpro #wordpressdeveloper #wordpressdesign #wordpress

  / honeyinfohub