{"id":523,"date":"2024-10-12T15:36:42","date_gmt":"2024-10-12T15:36:42","guid":{"rendered":"https:\/\/codebox.keyframetechsolution.com\/?p=523"},"modified":"2025-02-08T15:14:16","modified_gmt":"2025-02-08T15:14:16","slug":"inverted-border-radius-card-css","status":"publish","type":"post","link":"https:\/\/codebox.keyframetechsolution.com\/inverted-border-radius-card-css\/","title":{"rendered":"Create Responsive Inverted Border Radius Card using HTML CSS Only"},"content":{"rendered":"<h2><span data-preserver-spaces=\"true\">Introduction<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">In web design projects, a card is an excellent way to present content in a structured and visually appealing form. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">While traditional cards usually feature rounded corners, an inverted border-radius effect introduces a unique and modern touch. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This effect helps your UI stand out, creating a sleek, futuristic look\u2014all without requiring JavaScript.<\/span><\/p>\n<p><strong>In this guide, you&#8217;ll learn:<\/strong><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">What inverted border-radius card is<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">How to structure them using HTML code<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">How to style them with CSS code<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Ways to enhance design with hover effects<\/span><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">By the end of this tutorial, you&#8217;ll be able to build a card with ease. Let&#8217;s Start:<\/span><\/p>\n<p>\u2705\u00a0<strong>Watch Live Preview<\/strong>\u00a0\ud83d\udc49\ud83d\udc49<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/8KYHLYlnUlk?si=peeCqYBKRVlWMO7B\" width=\"100%\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p><a href=\"#conclusion\">Click Here to Download the Code<\/a><\/p>\n<h2><span data-preserver-spaces=\"true\">What Are Inverted Border Radius?<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Unlike traditional rounded cards that curve inward, an inverted border-radius creates an effect where the corners cut outward. <\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This gives a visually separate appearance, making them ideal for modern and creative web layouts.<\/span><\/p>\n<h3><span data-preserver-spaces=\"true\">Why Use?<\/span><\/h3>\n<p>Here are some points:<\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Modern Aesthetic:<\/span><\/strong><span data-preserver-spaces=\"true\"> Delivers a unique look compared to traditional designs.<\/span><\/li>\n<li><strong><span data-preserver-spaces=\"true\">Customizable:<\/span><\/strong><span data-preserver-spaces=\"true\"> You can tweak colors, shapes, and hover effects to fit your design.<\/span><\/li>\n<li><strong><span data-preserver-spaces=\"true\">Best for UI Components:<\/span><\/strong><span data-preserver-spaces=\"true\"> Works well for <a href=\"https:\/\/uiverse.io\/cards\" rel=\"nofollow noopener\" target=\"_blank\">cards<\/a>, <a href=\"https:\/\/getcssscan.com\/css-buttons-examples\" rel=\"nofollow noopener\" target=\"_blank\">buttons<\/a>, <a href=\"https:\/\/devsnap.me\/css-profile-cards\" rel=\"nofollow noopener\" target=\"_blank\">profile sections<\/a>, and more.<\/span><\/li>\n<\/ul>\n<h3><span data-preserver-spaces=\"true\">What\u00a0<\/span><span data-preserver-spaces=\"true\">you\u2019ll<\/span><span data-preserver-spaces=\"true\">\u00a0need?<\/span><\/h3>\n<p><span data-preserver-spaces=\"true\">Before we start, ensure you have the following:<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Basic knowledge of HTML, CSS, and JavaScript.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">A text editor (like <a href=\"https:\/\/code.visualstudio.com\/\" rel=\"nofollow noopener\" target=\"_blank\">VS Code<\/a>, <a href=\"https:\/\/www.sublimetext.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Sublime Text<\/a>, or <a href=\"https:\/\/notepad-plus-plus.org\/downloads\/\" rel=\"nofollow noopener\" target=\"_blank\">Notepad++<\/a>).<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">A browser to preview your work.<\/span><\/li>\n<\/ul>\n<h3><span data-preserver-spaces=\"true\">What are the Steps to Begin?<\/span><\/h3>\n<p>Create a folder on your computer and add the following files inside it:<\/p>\n<ul>\n<li><strong>index.html<\/strong><\/li>\n<li><strong>style.css<\/strong><\/li>\n<li><strong>script.js<\/strong><\/li>\n<\/ul>\n<h2>Source Code<\/h2>\n<h3><span data-preserver-spaces=\"true\">HTML Code Structure<\/span><\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">index.html<\/div>\n<\/p><\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n  &lt;title&gt;How to Create Responsive Inverted Border Radius Card using HTML CSS Only&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"&gt;\r\n  &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/typed.js\/2.0.11\/typed.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/waypoints\/4.0.1\/jquery.waypoints.min.js\"&gt;&lt;\/script&gt;\r\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css\"&gt;&lt;\/script&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&amp;family=Ubuntu:wght@400;500;700&amp;display=swap\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- CODE --&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"script.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\n<\/p><\/div>\n<\/div>\n<h3><span data-preserver-spaces=\"true\">CSS Code Structure<\/span><\/h3>\n<div class=\"code-container\">\n<div class=\"toolbar\">\n<div class=\"actions\">\n        <span><\/span><br \/>\n        <span class=\"yellow\"><\/span><br \/>\n        <span class=\"green\"><\/span>\n      <\/div>\n<div class=\"title\">style.css<\/div>\n<\/p><\/div>\n<div class=\"code-content\">\n<pre><code class=\"language-markup\">\r\n&lt; \/* Your CSS code here *\/ &gt;\r\n&lt; * { &gt;\r\n\r\n&lt; margin: 0; &gt;\r\n&lt; padding: 0 &gt;\r\n&lt; box-sizing: border-box; &gt;\r\n&lt;     text-decoration: none; &gt;\r\n&lt;     } &gt;\r\n      <\/code><\/pre>\n<\/p><\/div>\n<\/div>\n<h2><span data-preserver-spaces=\"true\">Adding Hover Effects<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">To make the card more interactive, we&#8217;ve added hover effects to the images. Here are some ideas you can add:<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Change the background color on hover<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Increase box-shadow to create a lifting effect<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Rotate or scale the card for a 3D feel<\/span><\/li>\n<\/ul>\n<h2><span data-preserver-spaces=\"true\">Make Responsive Design<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Modern websites must be mobile-friendly, so we&#8217;ve used <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/\" rel=\"nofollow noopener\" target=\"_blank\">media queries<\/a> to ensure the card looks great on all screen sizes.<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">Key responsive techniques:<\/span><\/strong><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Use <a href=\"https:\/\/www.joshwcomeau.com\/css\/interactive-guide-to-flexbox\/\" rel=\"nofollow noopener\" target=\"_blank\">flexbox<\/a>\/<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_grid_layout\" rel=\"nofollow noopener\" target=\"_blank\">grid<\/a> to align the card<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Adjust font sizes and paddings for smaller screens<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Set max-width limits to prevent overly stretched designs<\/span><\/li>\n<\/ul>\n<h2><span data-preserver-spaces=\"true\">Last but not least, Bonus Tips:<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">Once you&#8217;ve mastered the basics, try experimenting with:<\/span><\/p>\n<ul>\n<li><span data-preserver-spaces=\"true\">Use different border-radius values for unique effects<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Use gradient backgrounds for a stylish look<\/span><\/li>\n<li>Use animations such as CSS transitions or keyframes to create smooth effects &amp; visually appealing designs.<\/li>\n<\/ul>\n<h2 id=\"conclusion\"><span data-preserver-spaces=\"true\">Conclusion<\/span><\/h2>\n<p>In this guide, we&#8217;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.<\/p>\n<p><span data-preserver-spaces=\"true\">Now it&#8217;s your turn! Experiment with the design, tweak the styles, and incorporate it into your web projects. Happy coding! \ud83d\ude80<\/span><\/p>\n<p><strong><i class=\"fa fa-download\" style=\"color: #046bd2;\"><\/i> 17 people bought this<\/strong><\/p>\n<p><strong>Grab it Now for Just <i class=\"fa fa-rupee\" style=\"color:#046bd2;\"><\/i><span style=\"color:#046bd2;\">20<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In web design projects, a card is an excellent way to present content in a structured and visually appealing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[88],"tags":[388,385,386,387,389],"class_list":["post-523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designs","tag-border-corner-shape-css","tag-inverted-border-radius-card","tag-inverted-border-radius-css","tag-inverted-corners-css","tag-notched-corners-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":12,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":1414,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/523\/revisions\/1414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media\/525"}],"wp:attachment":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}