{"id":5001,"date":"2026-05-08T15:26:19","date_gmt":"2026-05-08T15:26:19","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/"},"modified":"2026-05-08T15:26:19","modified_gmt":"2026-05-08T15:26:19","slug":"css-corner-shape-folded-corners","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/","title":{"rendered":"Using CSS Corner-Shape for Folded Corners"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In modern web design, the aesthetics of UI elements play a crucial role in user engagement and experience. One way to enhance visual appeal is by using folded corners on boxes or panels. The CSS <code>corner-shape<\/code> property allows developers to create these unique designs with minimal effort. In this post, we will explore how to use CSS <code>corner-shape<\/code> for folded corners, along with practical examples and tips.<\/p>\n<h2>What is CSS Corner-Shape?<\/h2>\n<p>The <code>corner-shape<\/code> property in CSS enables developers to define the shape of an element&#8217;s corners. This property can be particularly useful for creating folded corner effects that add depth and interest to your design. By manipulating the corner shapes, you can create engaging visuals that stand out.<\/p>\n<h2>Benefits of Using Folded Corners<\/h2>\n<ul>\n<li>Enhances visual interaction with users.<\/li>\n<li>Provides a unique touch to standard UI elements.<\/li>\n<li>Improves user experience by drawing attention to important content.<\/li>\n<li>Easy implementation with minimal code.<\/li>\n<\/ul>\n<h2>Step-by-Step Guide to Create Folded Corners<\/h2>\n<h3>Step 1: Setting Up the HTML Structure<\/h3>\n<p>Start by creating a simple HTML structure. We will create a <code>div<\/code> element that will serve as our box with a folded corner effect.<\/p>\n<pre><code>&lt;div class=\"folded-corner\"&gt;\n    &lt;h2&gt;Folded Corner Box&lt;\/h2&gt;\n    &lt;p&gt;This box has a stylish folded corner!&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 2: Applying Basic CSS Styles<\/h3>\n<p>Next, we will apply some basic CSS styles to make our box visually appealing.<\/p>\n<pre><code>.folded-corner {\n    width: 300px;\n    padding: 20px;\n    background-color: #f0f0f0;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    position: relative;\n}<\/code><\/pre>\n<h3>Step 3: Creating the Folded Corner Effect<\/h3>\n<p>Now, we will use the <code>corner-shape<\/code> property to create the folded corner effect. We can achieve this by adding a pseudo-element.<\/p>\n<pre><code>.folded-corner::before {\n    content: \"\";\n    position: absolute;\n    top: -10px;\n    left: -10px;\n    width: 30px;\n    height: 30px;\n    background-color: #f0f0f0;\n    border-right: 10px solid #ccc;\n    border-bottom: 10px solid #ccc;\n    border-radius: 4px;\n    transform: rotate(-45deg);\n}<\/code><\/pre>\n<h3>Step 4: Final Touches<\/h3>\n<p>To finalize our design, we can add additional styling such as shadows or animations to enhance the folded corner effect.<\/p>\n<pre><code>.folded-corner:hover {\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<h2>Code Summary<\/h2>\n<p>Here\u2019s the complete code for your folded corner box:<\/p>\n<pre><code>&lt;div class=\"folded-corner\"&gt;\n    &lt;h2&gt;Folded Corner Box&lt;\/h2&gt;\n    &lt;p&gt;This box has a stylish folded corner!&lt;\/p&gt;\n&lt;\/div&gt;\n\n.folded-corner {\n    width: 300px;\n    padding: 20px;\n    background-color: #f0f0f0;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    position: relative;\n}\n\n.folded-corner::before {\n    content: \"\";\n    position: absolute;\n    top: -10px;\n    left: -10px;\n    width: 30px;\n    height: 30px;\n    background-color: #f0f0f0;\n    border-right: 10px solid #ccc;\n    border-bottom: 10px solid #ccc;\n    border-radius: 4px;\n    transform: rotate(-45deg);\n}\n\n.folded-corner:hover {\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>What browsers support the corner-shape property?<\/h3>\n<p>The <code>corner-shape<\/code> property is supported in modern browsers. Always check compatibility tables for detailed support.<\/p>\n<h3>Can I customize the folded corner size?<\/h3>\n<p>Yes! You can adjust the <code>width<\/code> and <code>height<\/code> of the pseudo-element to create different sizes of folded corners.<\/p>\n<h3>How can I optimize my CSS?<\/h3>\n<p>To optimize your CSS code, consider using a <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to reduce file size and improve loading times.<\/p>\n<h2>Conclusion<\/h2>\n<p>Using the <code>corner-shape<\/code> property in CSS offers a simple yet effective way to create visually appealing folded corners. This technique can add a unique flair to your web designs, making them more engaging for users. Experiment with the styles and effects to find what works best for your project. For further enhancements, consider utilizing tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/button-generator.php\">Button Generator<\/a> or <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> to streamline your workflows.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.<\/p>\n","protected":false},"author":1,"featured_media":2856,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","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-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-5001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using CSS Corner-Shape for Folded Corners - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using CSS Corner-Shape for Folded Corners - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-08T15:26:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Using CSS Corner-Shape for Folded Corners\",\"datePublished\":\"2026-05-08T15:26:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/\"},\"wordCount\":404,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/\",\"name\":\"Using CSS Corner-Shape for Folded Corners - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"datePublished\":\"2026-05-08T15:26:19+00:00\",\"description\":\"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246144776.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246144776\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/css-corner-shape-folded-corners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using CSS Corner-Shape for Folded Corners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using CSS Corner-Shape for Folded Corners - WebToolsLab","description":"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/","og_locale":"en_US","og_type":"article","og_title":"Using CSS Corner-Shape for Folded Corners - WebToolsLab","og_description":"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.","og_url":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/","og_site_name":"WebToolsLab","article_published_time":"2026-05-08T15:26:19+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Using CSS Corner-Shape for Folded Corners","datePublished":"2026-05-08T15:26:19+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/"},"wordCount":404,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/","url":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/","name":"Using CSS Corner-Shape for Folded Corners - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","datePublished":"2026-05-08T15:26:19+00:00","description":"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","width":1820,"height":1024,"caption":"1752246144776"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/css-corner-shape-folded-corners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Using CSS Corner-Shape for Folded Corners"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246144776.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn to create folded corners using CSS corner-shape. Step-by-step guide with code examples for developers.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/5001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=5001"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/5001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2856"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=5001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=5001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=5001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}