Inverted Border Radius Card in Elementor Free | CSS Grid

This video tackles designing an inverted border-radius card in Elementor Free using the CSS Grid. We use Custom CSS and the BEM naming methodology to make the code more maintainable.

|| Demo

Inverted Border Card

|| Custom Snippet

|| Recommended Videos
▶️ Make Entire Loop Card Clickable –

Subscribe for more Elementor and Bricks tutorials:

0:00 Intro
0:37 Example from another designer
1:13 Activate Flex and Grid Container
1:35 Explanation of the design
2:44 Creating the Grid Layout
3:34 Adding the required elements
5:06 Editing the child Grid Items
5:34 BEM Naming Methodology
7:16 Adding the CSS and styling
17:16 The inverted border-radius design
24:56 Tackling mobile responsiveness
32:00 Image Aspect Ratio
32:52 Conclusion

|| Recommended Resources:
🔗 Elementor Pro:
🔗 Crocoblock:
🔗 Bricksbuilder:

|| Let’s Connect:
👉 Subscribe:
👉 Facebook:
👉 Website:

|| Disclaimer:
Links included in this description might be affiliate links. If you purchase a product or service with my links, I may receive a small commission. There is no additional charge to you! Thank you for supporting me so I can continue providing free content each week!

|| Soundtrack
🎵 Life is a Dream- Michael Ramir C.