{"id":6126,"date":"2024-04-14T13:58:15","date_gmt":"2024-04-14T05:58:15","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6126"},"modified":"2024-04-14T13:58:15","modified_gmt":"2024-04-14T05:58:15","slug":"shape-design-using-border-radii","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/shape-design-using-border-radii\/","title":{"rendered":"Shape Design using Border Radii"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>You have the ability to form various shapes by adjusting the border and border radii of elements.<\/p>\n<h2>Rounded Box<\/h2>\n<p>If you utilize values starting from 1px and increasing up to the Radius property, you will end up with a rounded rectangle.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/225373024\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/225373024\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>By increasing the pixel value for the radius, you will gradually reach a capsule-like shape.<\/p>\n<h2>Capsule\/Pill Shape<\/h2>\n<p>The capsule shape&#8217;s radius is half the height or width value of the element in pixels. Further increments in values won&#8217;t change the shape.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/225373019\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/225373019\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Ellipse<\/h2>\n<p>You can employ percentage values for the Radius. A radius of 50% will present a smooth rendering of an ellipse. Greater values won&#8217;t affect the shape.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/225373017\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/225373017\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>The ellipse&#8217;s shape is directly linked to the element&#8217;s width. The ellipse&#8217;s aspect ratio is determined by the ratio of its width to height.<\/p>\n<h2>Circle<\/h2>\n<p>A circle is essentially an ellipse with equal width and height. To craft a circle, apply a radius of 50% to any element with identical width and height measurements.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/225373013\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/225373013\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2>Dynamic Corners<\/h2>\n<p>Similar to any other element, you can customize the Border Radius for various states.<\/p>\n<ol>\n<li>Access the <strong>Hover<\/strong> state and introduce a <strong>Border Radius<\/strong><\/li>\n<li>Switch to the default <strong>None<\/strong> state and apply a <strong>Transition<\/strong> to the <strong>Border Radius<\/strong> property. Adjust or maintain the duration and easing<\/li>\n<\/ol>\n<p><a href=\"https:\/\/help.webflow.com\/article\/states\">Explore additional information about States and Transitions on elements<\/a>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/225373003\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/225373003\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create circular shapes from rounded corners to perfect circles and everything in between using the Border Radius property.","protected":false},"author":2,"featured_media":6127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6126","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6126"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6127"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}