Introduction
In web design projects, a card is an excellent way to present content in a structured and visually appealing form.
While traditional cards usually feature rounded corners, an inverted border-radius effect introduces a unique and modern touch.
This effect helps your UI stand out, creating a sleek, futuristic look—all without requiring JavaScript.
In this guide, you’ll learn:
- What inverted border-radius card is
- How to structure them using HTML code
- How to style them with CSS code
- Ways to enhance design with hover effects
By the end of this tutorial, you’ll be able to build a card with ease. Let’s Start:
✅ Watch Live Preview 👉👉
Click Here to Download the Code
What Are Inverted Border Radius?
Unlike traditional rounded cards that curve inward, an inverted border-radius creates an effect where the corners cut outward.
This gives a visually separate appearance, making them ideal for modern and creative web layouts.
Why Use?
Here are some points:
- Modern Aesthetic: Delivers a unique look compared to traditional designs.
- Customizable: You can tweak colors, shapes, and hover effects to fit your design.
- Best for UI Components: Works well for cards, buttons, profile sections, and more.
What you’ll need?
Before we start, ensure you have the following:
- Basic knowledge of HTML, CSS, and JavaScript.
- A text editor (like VS Code, Sublime Text, or Notepad++).
- A browser to preview your work.
What are the Steps to Begin?
Create a folder on your computer and add the following files inside it:
- index.html
- style.css
- script.js
Source Code
HTML Code Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create Responsive Inverted Border Radius Card using HTML CSS Only</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS Code Structure
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
Adding Hover Effects
To make the card more interactive, we’ve added hover effects to the images. Here are some ideas you can add:
- Change the background color on hover
- Increase box-shadow to create a lifting effect
- Rotate or scale the card for a 3D feel
Make Responsive Design
Modern websites must be mobile-friendly, so we’ve used media queries to ensure the card looks great on all screen sizes.
Key responsive techniques:
- Use flexbox/grid to align the card
- Adjust font sizes and paddings for smaller screens
- Set max-width limits to prevent overly stretched designs
Last but not least, Bonus Tips:
Once you’ve mastered the basics, try experimenting with:
- Use different border-radius values for unique effects
- Use gradient backgrounds for a stylish look
- Use animations such as CSS transitions or keyframes to create smooth effects & visually appealing designs.
Conclusion
In this guide, we’ve explained how to create inverted border-radius cards step by step. This design adds a modern touch to webpages, making UI components more visually engaging.
Now it’s your turn! Experiment with the design, tweak the styles, and incorporate it into your web projects. Happy coding! 🚀
17 people bought this
Grab it Now for Just 20
