(855)-537-2266 sales@kerbco.com

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
https://ele-templates.daveden.co.uk/tut-demo/inverted-border-card/

|| Custom Snippet

|| Recommended Videos
โ–ถ๏ธ Make Entire Loop Card Clickable – https://youtu.be/L4hvI0v7S08?si=qYboqpLagZHnwNkg

Subscribe for more Elementor and Bricks tutorials:
https://www.youtube.com/@daveden2?sub_confirmation=1

|| TIMESTAMP
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: https://daveden.co.uk/links/elementor-pro/
๐Ÿ”— Crocoblock: https://daveden.co.uk/links/crocoblock/
๐Ÿ”— Bricksbuilder: https://bricksbuilder.io/

|| Let’s Connect:
๐Ÿ‘‰ Subscribe: https://www.youtube.com/@daveden2
๐Ÿ‘‰ Facebook: https://www.facebook.com/daveden2
๐Ÿ‘‰ Website: https://daveden.co.uk/

|| 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.