{"id":18205,"date":"2019-10-03T21:11:16","date_gmt":"2019-10-03T13:11:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18205"},"modified":"2023-09-13T16:33:56","modified_gmt":"2023-09-13T08:33:56","slug":"css3-border-shape","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/","title":{"rendered":"A Guide to: CSS Border Corner Shape"},"content":{"rendered":"<p>With the advent of <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a>, we\u2019ve seen a plethora of new features like Rounded Corners, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-box-shadows-effects\/\">Box Shadows<\/a>, and Text Shadows. However, some features are still in the experimental stage. One such feature is <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-backgrounds-4\/\">Border Corner Shape<\/a><\/strong>.<\/p>\n<p>This feature takes corner manipulation to the next level. While <code>border-radius<\/code> allows us to create rounded corners, Border Corner Shape introduces more intricate designs like beveled, scoop-style, and rectangle-notch corners.<\/p>\n<h2>Getting Started with Border Corner Shape<\/h2>\n<p>The property <code>border-corner-shape<\/code> is used to define the corner shape. Currently, it supports four predefined shapes: <code>curve<\/code>, <code>scoop<\/code>, <code>bevel<\/code>, and <strong>notch<\/strong>. Additionally, it\u2019s suggested to use <code>cubic-bezier<\/code> for custom shapes (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lists.w3.org\/Archives\/Public\/www-style\/2013Mar\/0495.html\">read the proposal<\/a>).<\/p>\n<p>It\u2019s important to note that <code>border-corner-shape<\/code> only sets the shape, while the <strong>size of the shape<\/strong> is determined by the <strong>border-radius<\/strong> property. Both properties should be used together to achieve the desired result.<\/p>\n<pre>\r\n.box {\r\n  background-color: #3498DB;\r\n  border-corner-shape: scoop;\r\n  border-radius: 30px;\r\n  width: 200px;\r\n  height: 200px;\r\n}\r\n<\/pre>\n<p>The above code snippet will produce a result similar to the image below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg\" alt=\"Scoop-shaped border corner\" width=\"500\" height=\"300\"><\/figure>\n<h2>Another Example<\/h2>\n<p>For this example, we\u2019ll set the corner shape to <strong>bevel<\/strong> and adjust the border radius to 50% for all corners except the bottom right.<\/p>\n<pre>\r\n.box {\r\n  background-color: #3498DB;\r\n  border-corner-shape: bevel;\r\n  border-radius: 50% 50% 0% 50%;\r\n  width: 200px;\r\n  height: 200px;\r\n}\r\n<\/pre>\n<p>The code above will yield the following visual output:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/bevel.jpg\" alt=\"Bevel-shaped border corner\" width=\"500\" height=\"300\"><\/figure>\n<p>Isn\u2019t it intriguing how much you can do with CSS Border Corner Shapes?<\/p>","protected":false},"excerpt":{"rendered":"<p>With the advent of CSS3, we\u2019ve seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in the experimental stage. One such feature is Border Corner Shape. This feature takes corner manipulation to the next level. While border-radius allows us to create rounded corners, Border Corner&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Guide to: CSS Border Corner Shape - Hongkiat<\/title>\n<meta name=\"description\" content=\"With the advent of CSS3, we&#039;ve seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to: CSS Border Corner Shape\" \/>\n<meta property=\"og:description\" content=\"With the advent of CSS3, we&#039;ve seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-03T13:11:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-13T08:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Guide to: CSS Border Corner Shape\",\"datePublished\":\"2019-10-03T13:11:16+00:00\",\"dateModified\":\"2023-09-13T08:33:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/\"},\"wordCount\":198,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-shape\\\/scoop.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/\",\"name\":\"A Guide to: CSS Border Corner Shape - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-shape\\\/scoop.jpg\",\"datePublished\":\"2019-10-03T13:11:16+00:00\",\"dateModified\":\"2023-09-13T08:33:56+00:00\",\"description\":\"With the advent of CSS3, we've seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-shape\\\/scoop.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-border-shape\\\/scoop.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-border-shape\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to: CSS Border Corner Shape\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide to: CSS Border Corner Shape - Hongkiat","description":"With the advent of CSS3, we've seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in","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:\/\/www.hongkiat.com\/blog\/css3-border-shape\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to: CSS Border Corner Shape","og_description":"With the advent of CSS3, we've seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-10-03T13:11:16+00:00","article_modified_time":"2023-09-13T08:33:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Guide to: CSS Border Corner Shape","datePublished":"2019-10-03T13:11:16+00:00","dateModified":"2023-09-13T08:33:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/"},"wordCount":198,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg","keywords":["CSS"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/","name":"A Guide to: CSS Border Corner Shape - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg","datePublished":"2019-10-03T13:11:16+00:00","dateModified":"2023-09-13T08:33:56+00:00","description":"With the advent of CSS3, we've seen a plethora of new features like Rounded Corners, Box Shadows, and Text Shadows. However, some features are still in","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-border-shape\/scoop.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-border-shape\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to: CSS Border Corner Shape"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4JD","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18205"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18205\/revisions"}],"predecessor-version":[{"id":69216,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18205\/revisions\/69216"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18205"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}