[{"data":1,"prerenderedAt":1035},["ShallowReactive",2],{"guide-border-radius-guide":3},{"id":4,"title":5,"body":6,"date":1025,"description":1026,"extension":1027,"meta":1028,"navigation":72,"path":1031,"readingTime":95,"seo":1032,"stem":1033,"__hash__":1034},"guides\u002Fguides\u002Fborder-radius-guide.md","Border Radius Guide: Mastering Rounded Corners in CSS",{"type":7,"value":8,"toc":1003},"minimark",[9,14,23,29,33,39,126,131,183,186,190,193,229,232,244,247,251,258,291,294,298,301,351,354,358,362,369,433,436,440,446,500,504,507,570,577,581,584,634,638,641,729,734,738,741,847,850,854,861,913,916,920,923,927,961,965,979,983,999],[10,11,13],"h2",{"id":12},"what-is-border-radius","What Is border-radius?",[15,16,17,18,22],"p",{},"The CSS ",[19,20,21],"code",{},"border-radius"," property rounds the corners of an element's outer border edge. You can round all four corners uniformly or control each corner independently. The property accepts length values (px, em, rem) and percentages, and each corner can have separate horizontal and vertical radii for elliptical curves.",[15,24,25,26,28],{},"Browser support is universal — every modern browser has supported ",[19,27,21],{}," without vendor prefixes since 2013.",[10,30,32],{"id":31},"syntax-and-shorthand","Syntax and Shorthand",[15,34,35,36,38],{},"The ",[19,37,21],{}," shorthand follows a clockwise order: top-left, top-right, bottom-right, bottom-left.",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-css shiki shiki-themes github-light github-dark","\u002F* 1 value: all corners equal *\u002F\nborder-radius: 8px;\n\n\u002F* 2 values: top-left+bottom-right, top-right+bottom-left *\u002F\nborder-radius: 8px 16px;\n\n\u002F* 3 values: top-left, top-right+bottom-left, bottom-right *\u002F\nborder-radius: 8px 16px 24px;\n\n\u002F* 4 values: top-left, top-right, bottom-right, bottom-left *\u002F\nborder-radius: 8px 16px 24px 32px;\n","css","",[19,47,48,57,67,74,80,88,93,99,107,112,118],{"__ignoreMap":45},[49,50,53],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sJ8bj","\u002F* 1 value: all corners equal *\u002F\n",[49,58,60,63],{"class":51,"line":59},2,[49,61,21],{"class":62},"s9eBZ",[49,64,66],{"class":65},"sVt8B",": 8px;\n",[49,68,70],{"class":51,"line":69},3,[49,71,73],{"emptyLinePlaceholder":72},true,"\n",[49,75,77],{"class":51,"line":76},4,[49,78,79],{"class":55},"\u002F* 2 values: top-left+bottom-right, top-right+bottom-left *\u002F\n",[49,81,83,85],{"class":51,"line":82},5,[49,84,21],{"class":62},[49,86,87],{"class":65},": 8px 16px;\n",[49,89,91],{"class":51,"line":90},6,[49,92,73],{"emptyLinePlaceholder":72},[49,94,96],{"class":51,"line":95},7,[49,97,98],{"class":55},"\u002F* 3 values: top-left, top-right+bottom-left, bottom-right *\u002F\n",[49,100,102,104],{"class":51,"line":101},8,[49,103,21],{"class":62},[49,105,106],{"class":65},": 8px 16px 24px;\n",[49,108,110],{"class":51,"line":109},9,[49,111,73],{"emptyLinePlaceholder":72},[49,113,115],{"class":51,"line":114},10,[49,116,117],{"class":55},"\u002F* 4 values: top-left, top-right, bottom-right, bottom-left *\u002F\n",[49,119,121,123],{"class":51,"line":120},11,[49,122,21],{"class":62},[49,124,125],{"class":65},": 8px 16px 24px 32px;\n",[127,128,130],"h3",{"id":129},"shorthand-value-mapping","Shorthand Value Mapping",[132,133,134,147],"table",{},[135,136,137],"thead",{},[138,139,140,144],"tr",{},[141,142,143],"th",{},"Values",[141,145,146],{},"Corners Affected",[148,149,150,159,167,175],"tbody",{},[138,151,152,156],{},[153,154,155],"td",{},"1",[153,157,158],{},"All four corners equally",[138,160,161,164],{},[153,162,163],{},"2",[153,165,166],{},"Top-left\u002Fbottom-right, top-right\u002Fbottom-left",[138,168,169,172],{},[153,170,171],{},"3",[153,173,174],{},"Top-left, top-right\u002Fbottom-left, bottom-right",[138,176,177,180],{},[153,178,179],{},"4",[153,181,182],{},"Top-left, top-right, bottom-right, bottom-left",[15,184,185],{},"Think of the pattern as mirroring: when you provide fewer than four values, the missing values mirror their diagonal opposites.",[10,187,189],{"id":188},"individual-corner-properties","Individual Corner Properties",[15,191,192],{},"For granular control, use the longhand properties:",[40,194,196],{"className":42,"code":195,"language":44,"meta":45,"style":45},"border-top-left-radius: 8px;\nborder-top-right-radius: 16px;\nborder-bottom-right-radius: 24px;\nborder-bottom-left-radius: 32px;\n",[19,197,198,205,213,221],{"__ignoreMap":45},[49,199,200,203],{"class":51,"line":52},[49,201,202],{"class":62},"border-top-left-radius",[49,204,66],{"class":65},[49,206,207,210],{"class":51,"line":59},[49,208,209],{"class":62},"border-top-right-radius",[49,211,212],{"class":65},": 16px;\n",[49,214,215,218],{"class":51,"line":69},[49,216,217],{"class":62},"border-bottom-right-radius",[49,219,220],{"class":65},": 24px;\n",[49,222,223,226],{"class":51,"line":76},[49,224,225],{"class":62},"border-bottom-left-radius",[49,227,228],{"class":65},": 32px;\n",[15,230,231],{},"Each longhand property also accepts two values — the first for the horizontal radius, the second for the vertical — separated by a slash:",[40,233,235],{"className":42,"code":234,"language":44,"meta":45,"style":45},"border-top-left-radius: 40px 20px;\n",[19,236,237],{"__ignoreMap":45},[49,238,239,241],{"class":51,"line":52},[49,240,202],{"class":62},[49,242,243],{"class":65},": 40px 20px;\n",[15,245,246],{},"This creates an elliptical corner instead of a circular one.",[10,248,250],{"id":249},"elliptical-corners-with-the-slash-syntax","Elliptical Corners with the Slash Syntax",[15,252,253,254,257],{},"When you need different horizontal and vertical radii, use the ",[19,255,256],{},"\u002F"," separator in the shorthand:",[40,259,261],{"className":42,"code":260,"language":44,"meta":45,"style":45},"\u002F* horizontal \u002F vertical *\u002F\nborder-radius: 40px \u002F 20px;\n\n\u002F* Different per corner *\u002F\nborder-radius: 40px 10px \u002F 20px 5px;\n",[19,262,263,268,275,279,284],{"__ignoreMap":45},[49,264,265],{"class":51,"line":52},[49,266,267],{"class":55},"\u002F* horizontal \u002F vertical *\u002F\n",[49,269,270,272],{"class":51,"line":59},[49,271,21],{"class":62},[49,273,274],{"class":65},": 40px \u002F 20px;\n",[49,276,277],{"class":51,"line":69},[49,278,73],{"emptyLinePlaceholder":72},[49,280,281],{"class":51,"line":76},[49,282,283],{"class":55},"\u002F* Different per corner *\u002F\n",[49,285,286,288],{"class":51,"line":82},[49,287,21],{"class":62},[49,289,290],{"class":65},": 40px 10px \u002F 20px 5px;\n",[15,292,293],{},"The values before the slash define horizontal radii (clockwise). The values after define vertical radii (clockwise). This is how you create leaf and egg shapes.",[10,295,297],{"id":296},"pixels-vs-percentages","Pixels vs. Percentages",[15,299,300],{},"The unit you choose changes the behavior significantly.",[132,302,303,316],{},[135,304,305],{},[138,306,307,310,313],{},[141,308,309],{},"Unit",[141,311,312],{},"Behavior",[141,314,315],{},"Best For",[148,317,318,329,340],{},[138,319,320,323,326],{},[153,321,322],{},"px",[153,324,325],{},"Fixed rounding regardless of size",[153,327,328],{},"Buttons, cards, consistent UI",[138,330,331,334,337],{},[153,332,333],{},"em\u002Frem",[153,335,336],{},"Scales with font size",[153,338,339],{},"Typography-linked components",[138,341,342,345,348],{},[153,343,344],{},"%",[153,346,347],{},"Relative to element dimensions",[153,349,350],{},"Circles, ellipses, organic shapes",[15,352,353],{},"Pixel values produce predictable, consistent curves. Percentage values calculate the radius relative to the element's own width and height, which creates wildly different results on non-square elements.",[10,355,357],{"id":356},"creating-common-shapes","Creating Common Shapes",[127,359,361],{"id":360},"circle","Circle",[15,363,364,365,368],{},"A square element with ",[19,366,367],{},"50%"," radius becomes a perfect circle.",[40,370,372],{"className":42,"code":371,"language":44,"meta":45,"style":45},".circle {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n}\n",[19,373,374,383,401,414,428],{"__ignoreMap":45},[49,375,376,380],{"class":51,"line":52},[49,377,379],{"class":378},"sScJk",".circle",[49,381,382],{"class":65}," {\n",[49,384,385,389,392,395,398],{"class":51,"line":59},[49,386,388],{"class":387},"sj4cs","  width",[49,390,391],{"class":65},": ",[49,393,394],{"class":387},"120",[49,396,322],{"class":397},"szBVR",[49,399,400],{"class":65},";\n",[49,402,403,406,408,410,412],{"class":51,"line":69},[49,404,405],{"class":387},"  height",[49,407,391],{"class":65},[49,409,394],{"class":387},[49,411,322],{"class":397},[49,413,400],{"class":65},[49,415,416,419,421,424,426],{"class":51,"line":76},[49,417,418],{"class":387},"  border-radius",[49,420,391],{"class":65},[49,422,423],{"class":387},"50",[49,425,344],{"class":397},[49,427,400],{"class":65},[49,429,430],{"class":51,"line":82},[49,431,432],{"class":65},"}\n",[15,434,435],{},"The element must be square. If the width and height differ, you get an ellipse instead.",[127,437,439],{"id":438},"ellipse","Ellipse",[15,441,442,443,445],{},"Any rectangular element with ",[19,444,367],{}," radius becomes an ellipse.",[40,447,449],{"className":42,"code":448,"language":44,"meta":45,"style":45},".ellipse {\n  width: 200px;\n  height: 100px;\n  border-radius: 50%;\n}\n",[19,450,451,458,471,484,496],{"__ignoreMap":45},[49,452,453,456],{"class":51,"line":52},[49,454,455],{"class":378},".ellipse",[49,457,382],{"class":65},[49,459,460,462,464,467,469],{"class":51,"line":59},[49,461,388],{"class":387},[49,463,391],{"class":65},[49,465,466],{"class":387},"200",[49,468,322],{"class":397},[49,470,400],{"class":65},[49,472,473,475,477,480,482],{"class":51,"line":69},[49,474,405],{"class":387},[49,476,391],{"class":65},[49,478,479],{"class":387},"100",[49,481,322],{"class":397},[49,483,400],{"class":65},[49,485,486,488,490,492,494],{"class":51,"line":76},[49,487,418],{"class":387},[49,489,391],{"class":65},[49,491,423],{"class":387},[49,493,344],{"class":397},[49,495,400],{"class":65},[49,497,498],{"class":51,"line":82},[49,499,432],{"class":65},[127,501,503],{"id":502},"pill-capsule","Pill \u002F Capsule",[15,505,506],{},"A pill shape requires a radius equal to or greater than half the shorter dimension.",[40,508,510],{"className":42,"code":509,"language":44,"meta":45,"style":45},".pill {\n  height: 40px;\n  border-radius: 9999px; \u002F* or 20px if height is fixed *\u002F\n  padding: 0 24px;\n}\n",[19,511,512,519,532,549,566],{"__ignoreMap":45},[49,513,514,517],{"class":51,"line":52},[49,515,516],{"class":378},".pill",[49,518,382],{"class":65},[49,520,521,523,525,528,530],{"class":51,"line":59},[49,522,405],{"class":387},[49,524,391],{"class":65},[49,526,527],{"class":387},"40",[49,529,322],{"class":397},[49,531,400],{"class":65},[49,533,534,536,538,541,543,546],{"class":51,"line":69},[49,535,418],{"class":387},[49,537,391],{"class":65},[49,539,540],{"class":387},"9999",[49,542,322],{"class":397},[49,544,545],{"class":65},"; ",[49,547,548],{"class":55},"\u002F* or 20px if height is fixed *\u002F\n",[49,550,551,554,556,559,562,564],{"class":51,"line":76},[49,552,553],{"class":387},"  padding",[49,555,391],{"class":65},[49,557,558],{"class":387},"0",[49,560,561],{"class":387}," 24",[49,563,322],{"class":397},[49,565,400],{"class":65},[49,567,568],{"class":51,"line":82},[49,569,432],{"class":65},[15,571,572,573,576],{},"Using ",[19,574,575],{},"9999px"," (or any absurdly large value) ensures the pill shape holds even if the element size changes. The browser clamps the radius at half the shorter side internally.",[127,578,580],{"id":579},"leaf-shape","Leaf Shape",[15,582,583],{},"Combine two opposite corners with large radii to create a leaf or teardrop:",[40,585,587],{"className":42,"code":586,"language":44,"meta":45,"style":45},".leaf {\n  border-radius: 0 80px 0 80px;\n  background: #10B981;\n}\n",[19,588,589,596,618,630],{"__ignoreMap":45},[49,590,591,594],{"class":51,"line":52},[49,592,593],{"class":378},".leaf",[49,595,382],{"class":65},[49,597,598,600,602,604,607,609,612,614,616],{"class":51,"line":59},[49,599,418],{"class":387},[49,601,391],{"class":65},[49,603,558],{"class":387},[49,605,606],{"class":387}," 80",[49,608,322],{"class":397},[49,610,611],{"class":387}," 0",[49,613,606],{"class":387},[49,615,322],{"class":397},[49,617,400],{"class":65},[49,619,620,623,625,628],{"class":51,"line":69},[49,621,622],{"class":387},"  background",[49,624,391],{"class":65},[49,626,627],{"class":387},"#10B981",[49,629,400],{"class":65},[49,631,632],{"class":51,"line":76},[49,633,432],{"class":65},[127,635,637],{"id":636},"egg-shape","Egg Shape",[15,639,640],{},"Use different horizontal and vertical radii on the top corners:",[40,642,644],{"className":42,"code":643,"language":44,"meta":45,"style":45},".egg {\n  width: 120px;\n  height: 160px;\n  border-radius: 50% 50% 50% 50% \u002F 60% 60% 40% 40%;\n}\n",[19,645,646,653,665,678,725],{"__ignoreMap":45},[49,647,648,651],{"class":51,"line":52},[49,649,650],{"class":378},".egg",[49,652,382],{"class":65},[49,654,655,657,659,661,663],{"class":51,"line":59},[49,656,388],{"class":387},[49,658,391],{"class":65},[49,660,394],{"class":387},[49,662,322],{"class":397},[49,664,400],{"class":65},[49,666,667,669,671,674,676],{"class":51,"line":69},[49,668,405],{"class":387},[49,670,391],{"class":65},[49,672,673],{"class":387},"160",[49,675,322],{"class":397},[49,677,400],{"class":65},[49,679,680,682,684,686,688,691,693,695,697,699,701,704,707,709,712,714,717,719,721,723],{"class":51,"line":76},[49,681,418],{"class":387},[49,683,391],{"class":65},[49,685,423],{"class":387},[49,687,344],{"class":397},[49,689,690],{"class":387}," 50",[49,692,344],{"class":397},[49,694,690],{"class":387},[49,696,344],{"class":397},[49,698,690],{"class":387},[49,700,344],{"class":397},[49,702,703],{"class":65}," \u002F ",[49,705,706],{"class":387},"60",[49,708,344],{"class":397},[49,710,711],{"class":387}," 60",[49,713,344],{"class":397},[49,715,716],{"class":387}," 40",[49,718,344],{"class":397},[49,720,716],{"class":387},[49,722,344],{"class":397},[49,724,400],{"class":65},[49,726,727],{"class":51,"line":82},[49,728,432],{"class":65},[15,730,35,731,733],{},[19,732,256],{}," splits horizontal from vertical. Taller vertical radii on top give the egg its wider upper curve.",[10,735,737],{"id":736},"common-ui-patterns","Common UI Patterns",[15,739,740],{},"Rounded corners communicate hierarchy. Larger radii suggest approachability and softness; sharper corners suggest precision and formality.",[132,742,743,756],{},[135,744,745],{},[138,746,747,750,753],{},[141,748,749],{},"Pattern",[141,751,752],{},"Radius",[141,754,755],{},"Context",[148,757,758,770,783,795,808,821,834],{},[138,759,760,763,767],{},[153,761,762],{},"Avatars",[153,764,765],{},[19,766,367],{},[153,768,769],{},"Circular user images",[138,771,772,775,780],{},[153,773,774],{},"Buttons",[153,776,777],{},[19,778,779],{},"6px – 8px",[153,781,782],{},"Standard interactive elements",[138,784,785,788,792],{},[153,786,787],{},"Pill buttons",[153,789,790],{},[19,791,575],{},[153,793,794],{},"Tags, filters, category chips",[138,796,797,800,805],{},[153,798,799],{},"Cards",[153,801,802],{},[19,803,804],{},"8px – 16px",[153,806,807],{},"Content containers",[138,809,810,813,818],{},[153,811,812],{},"Modals",[153,814,815],{},[19,816,817],{},"12px – 16px",[153,819,820],{},"Overlayed panels",[138,822,823,826,831],{},[153,824,825],{},"Input fields",[153,827,828],{},[19,829,830],{},"4px – 6px",[153,832,833],{},"Form elements",[138,835,836,839,844],{},[153,837,838],{},"Tooltips",[153,840,841],{},[19,842,843],{},"4px",[153,845,846],{},"Small, contextual popups",[15,848,849],{},"Consistency matters more than the exact number. Pick a scale and apply it uniformly across your component library.",[10,851,853],{"id":852},"responsive-considerations","Responsive Considerations",[15,855,856,857,860],{},"Fixed pixel values stay the same across breakpoints. If you want corner sizes to adapt, use ",[19,858,859],{},"clamp()",":",[40,862,864],{"className":42,"code":863,"language":44,"meta":45,"style":45},".card {\n  border-radius: clamp(8px, 1.5vw, 16px);\n}\n",[19,865,866,873,909],{"__ignoreMap":45},[49,867,868,871],{"class":51,"line":52},[49,869,870],{"class":378},".card",[49,872,382],{"class":65},[49,874,875,877,879,882,885,888,890,893,896,899,901,904,906],{"class":51,"line":59},[49,876,418],{"class":387},[49,878,391],{"class":65},[49,880,881],{"class":387},"clamp",[49,883,884],{"class":65},"(",[49,886,887],{"class":387},"8",[49,889,322],{"class":397},[49,891,892],{"class":65},", ",[49,894,895],{"class":387},"1.5",[49,897,898],{"class":397},"vw",[49,900,892],{"class":65},[49,902,903],{"class":387},"16",[49,905,322],{"class":397},[49,907,908],{"class":65},");\n",[49,910,911],{"class":51,"line":69},[49,912,432],{"class":65},[15,914,915],{},"This scales the radius between 8px and 16px based on viewport width. It keeps small screens subtle and large screens expressive without breakpoint-specific overrides.",[10,917,919],{"id":918},"dark-mode-notes","Dark Mode Notes",[15,921,922],{},"Rounded corners behave identically in light and dark modes, but the visual weight shifts. On dark backgrounds, high-radius shapes (circles, pills) draw more attention because the contrast between the shape and its background tends to be higher. Consider reducing radii slightly in dark mode if your UI feels too \"floaty.\"",[10,924,926],{"id":925},"key-takeaways","Key Takeaways",[928,929,930,934,940,945,950,953,956],"ul",{},[931,932,933],"li",{},"The shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left",[931,935,936,937,939],{},"Use the ",[19,938,256],{}," syntax to set different horizontal and vertical radii for elliptical corners",[931,941,942,944],{},[19,943,367],{}," on a square element creates a circle; on a rectangle, an ellipse",[931,946,947,949],{},[19,948,575],{}," is the standard trick for pill shapes that adapt to any size",[931,951,952],{},"Percentages compute against element dimensions, not parent dimensions",[931,954,955],{},"Pick a radius scale for your design system and apply it consistently",[931,957,958,960],{},[19,959,859],{}," lets you create responsive radii without media queries",[10,962,964],{"id":963},"try-it-yourself","Try It Yourself",[15,966,967,968,973,974,978],{},"Experiment with border-radius values interactively using our ",[969,970,972],"a",{"href":971},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator"," — combine rounded shapes with gradient backgrounds to prototype complete components. For precise color work on your shapes, try the ",[969,975,977],{"href":976},"\u002Ftools\u002Fcolor-converter","Color Converter",".",[10,980,982],{"id":981},"related-guides","Related Guides",[928,984,985,992],{},[931,986,987,991],{},[969,988,990],{"href":989},"\u002Fguides\u002Fcss-rounded-corners-tutorial","CSS Rounded Corners Tutorial"," — Step-by-step walkthrough from basic rounding to complex multi-radius shapes",[931,993,994,998],{},[969,995,997],{"href":996},"\u002Fguides\u002Fcss-shapes-and-borders","CSS Shapes and Borders"," — Creative techniques combining border-radius with transforms and clip-path",[1000,1001,1002],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":45,"searchDepth":59,"depth":59,"links":1004},[1005,1006,1009,1010,1011,1012,1019,1020,1021,1022,1023,1024],{"id":12,"depth":59,"text":13},{"id":31,"depth":59,"text":32,"children":1007},[1008],{"id":129,"depth":69,"text":130},{"id":188,"depth":59,"text":189},{"id":249,"depth":59,"text":250},{"id":296,"depth":59,"text":297},{"id":356,"depth":59,"text":357,"children":1013},[1014,1015,1016,1017,1018],{"id":360,"depth":69,"text":361},{"id":438,"depth":69,"text":439},{"id":502,"depth":69,"text":503},{"id":579,"depth":69,"text":580},{"id":636,"depth":69,"text":637},{"id":736,"depth":59,"text":737},{"id":852,"depth":59,"text":853},{"id":918,"depth":59,"text":919},{"id":925,"depth":59,"text":926},{"id":963,"depth":59,"text":964},{"id":981,"depth":59,"text":982},"2026-05-28","Complete guide to CSS border-radius syntax, individual corner control, and percentage-based shapes. Create perfect rounds and complex curves.","md",{"immutable":72,"keywords":1029},[21,1030],"border-radius-guide","\u002Fguides\u002Fborder-radius-guide",{"title":5,"description":1026},"guides\u002Fborder-radius-guide","h59S7KTrLOqNmvYsDgi8WclDmAqTtUbTWPe8fvOFJEw",1780401328650]