[{"data":1,"prerenderedAt":1018},["ShallowReactive",2],{"guide-css-rounded-corners-tutorial":3},{"id":4,"title":5,"body":6,"date":1010,"description":1011,"extension":1012,"meta":1013,"navigation":394,"path":1014,"readingTime":406,"seo":1015,"stem":1016,"__hash__":1017},"guides\u002Fguides\u002Fcss-rounded-corners-tutorial.md","CSS Rounded Corners Tutorial",{"type":7,"value":8,"toc":987},"minimark",[9,14,23,27,30,78,81,86,147,151,154,197,200,204,217,228,232,235,283,290,294,336,343,347,350,458,467,470,474,488,492,495,524,531,538,580,583,587,590,699,703,718,722,862,865,869,876,916,922,926,965,969,983],[10,11,13],"h2",{"id":12},"rounded-corners-make-everything-better","Rounded Corners Make Everything Better",[15,16,17,18,22],"p",{},"Sharp 90-degree corners look dated. A subtle ",[19,20,21],"code",{},"border-radius"," softens edges, signals affordance on buttons, and adds visual polish to any container. This tutorial walks you from basic rounded corners to organic blob shapes — with code you can copy straight into your project.",[10,24,26],{"id":25},"basic-rounded-corners","Basic Rounded Corners",[15,28,29],{},"The simplest case: one value rounds every corner by the same amount.",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark",".card {\n  border-radius: 12px;\n}\n","css","",[19,38,39,52,72],{"__ignoreMap":36},[40,41,44,48],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sScJk",".card",[40,49,51],{"class":50},"sVt8B"," {\n",[40,53,55,59,62,65,69],{"class":42,"line":54},2,[40,56,58],{"class":57},"sj4cs","  border-radius",[40,60,61],{"class":50},": ",[40,63,64],{"class":57},"12",[40,66,68],{"class":67},"szBVR","px",[40,70,71],{"class":50},";\n",[40,73,75],{"class":42,"line":74},3,[40,76,77],{"class":50},"}\n",[15,79,80],{},"12–16px is the sweet spot for cards. Use 6–8px for buttons and inputs. The rounding stays consistent regardless of element size because pixel values are fixed.",[82,83,85],"h3",{"id":84},"unit-quick-reference","Unit Quick Reference",[87,88,89,105],"table",{},[90,91,92],"thead",{},[93,94,95,99,102],"tr",{},[96,97,98],"th",{},"Unit",[96,100,101],{},"Behavior",[96,103,104],{},"Best For",[106,107,108,121,134],"tbody",{},[93,109,110,115,118],{},[111,112,113],"td",{},[19,114,68],{},[111,116,117],{},"Fixed radius",[111,119,120],{},"Buttons, cards, inputs",[93,122,123,128,131],{},[111,124,125],{},[19,126,127],{},"%",[111,129,130],{},"Relative to element size",[111,132,133],{},"Circles, responsive shapes",[93,135,136,141,144],{},[111,137,138],{},[19,139,140],{},"em",[111,142,143],{},"Relative to font size",[111,145,146],{},"Elements scaled by text size",[10,148,150],{"id":149},"asymmetric-corners","Asymmetric Corners",[15,152,153],{},"Four different values give each corner its own personality. The order is clockwise: top-left, top-right, bottom-right, bottom-left.",[31,155,157],{"className":33,"code":156,"language":35,"meta":36,"style":36},".asymmetric-card {\n  border-radius: 24px 4px 24px 4px;\n}\n",[19,158,159,166,193],{"__ignoreMap":36},[40,160,161,164],{"class":42,"line":43},[40,162,163],{"class":46},".asymmetric-card",[40,165,51],{"class":50},[40,167,168,170,172,175,177,180,182,185,187,189,191],{"class":42,"line":54},[40,169,58],{"class":57},[40,171,61],{"class":50},[40,173,174],{"class":57},"24",[40,176,68],{"class":67},[40,178,179],{"class":57}," 4",[40,181,68],{"class":67},[40,183,184],{"class":57}," 24",[40,186,68],{"class":67},[40,188,179],{"class":57},[40,190,68],{"class":67},[40,192,71],{"class":50},[40,194,195],{"class":42,"line":74},[40,196,77],{"class":50},[15,198,199],{},"This creates a \"ticket stub\" look — two prominent curves on the left and right edges with tight corners top-right and bottom-left. It works well for promo badges, tags, and feature callouts.",[82,201,203],{"id":202},"when-to-go-asymmetric","When to Go Asymmetric",[205,206,207,211,214],"ul",{},[208,209,210],"li",{},"Draw attention to one corner of a card",[208,212,213],{},"Create visual rhythm in a list of items",[208,215,216],{},"Mimic physical objects like tags or folded paper",[15,218,219,220,223,224,227],{},"Avoid mixing more than two radius values in a single component. A ",[19,221,222],{},"24px 4px 24px 4px"," pattern reads as intentional. A ",[19,225,226],{},"24px 8px 16px 4px"," pattern reads as a mistake.",[10,229,231],{"id":230},"pill-and-stadium-shapes","Pill and Stadium Shapes",[15,233,234],{},"When the radius equals or exceeds half the element height, the corners meet in the middle — producing a pill shape.",[31,236,238],{"className":33,"code":237,"language":35,"meta":36,"style":36},".pill-button {\n  border-radius: 9999px;\n  padding: 10px 24px;\n}\n",[19,239,240,247,260,278],{"__ignoreMap":36},[40,241,242,245],{"class":42,"line":43},[40,243,244],{"class":46},".pill-button",[40,246,51],{"class":50},[40,248,249,251,253,256,258],{"class":42,"line":54},[40,250,58],{"class":57},[40,252,61],{"class":50},[40,254,255],{"class":57},"9999",[40,257,68],{"class":67},[40,259,71],{"class":50},[40,261,262,265,267,270,272,274,276],{"class":42,"line":74},[40,263,264],{"class":57},"  padding",[40,266,61],{"class":50},[40,268,269],{"class":57},"10",[40,271,68],{"class":67},[40,273,184],{"class":57},[40,275,68],{"class":67},[40,277,71],{"class":50},[40,279,281],{"class":42,"line":280},4,[40,282,77],{"class":50},[15,284,285,286,289],{},"Using ",[19,287,288],{},"9999px"," (or any very large value) guarantees a pill regardless of the element's actual height. You never need to calculate half-height manually.",[82,291,293],{"id":292},"pill-vs-circle","Pill vs Circle",[87,295,296,309],{},[90,297,298],{},[93,299,300,303,306],{},[96,301,302],{},"Shape",[96,304,305],{},"Condition",[96,307,308],{},"Example",[106,310,311,322],{},[93,312,313,316,319],{},[111,314,315],{},"Pill",[111,317,318],{},"Large radius, non-square element",[111,320,321],{},"Wider-than-tall button",[93,323,324,327,333],{},[111,325,326],{},"Circle",[111,328,329,332],{},[19,330,331],{},"border-radius: 50%"," on a square element",[111,334,335],{},"Avatar image",[15,337,338,339,342],{},"A pill stretches horizontally or vertically. A circle requires equal width and height plus ",[19,340,341],{},"50%",".",[10,344,346],{"id":345},"leaf-and-blob-shapes","Leaf and Blob Shapes",[15,348,349],{},"Push the slash syntax further and you create organic, leaf-like shapes. The slash separates horizontal from vertical radii.",[31,351,353],{"className":33,"code":352,"language":35,"meta":36,"style":36},".leaf {\n  border-radius: 0 50% 50% 50%;\n}\n\n.blob {\n  border-radius: 60% 40% 50% 70% \u002F 50% 60% 40% 50%;\n}\n",[19,354,355,362,386,390,396,404,453],{"__ignoreMap":36},[40,356,357,360],{"class":42,"line":43},[40,358,359],{"class":46},".leaf",[40,361,51],{"class":50},[40,363,364,366,368,371,374,376,378,380,382,384],{"class":42,"line":54},[40,365,58],{"class":57},[40,367,61],{"class":50},[40,369,370],{"class":57},"0",[40,372,373],{"class":57}," 50",[40,375,127],{"class":67},[40,377,373],{"class":57},[40,379,127],{"class":67},[40,381,373],{"class":57},[40,383,127],{"class":67},[40,385,71],{"class":50},[40,387,388],{"class":42,"line":74},[40,389,77],{"class":50},[40,391,392],{"class":42,"line":280},[40,393,395],{"emptyLinePlaceholder":394},true,"\n",[40,397,399,402],{"class":42,"line":398},5,[40,400,401],{"class":46},".blob",[40,403,51],{"class":50},[40,405,407,409,411,414,416,419,421,423,425,428,430,433,436,438,441,443,445,447,449,451],{"class":42,"line":406},6,[40,408,58],{"class":57},[40,410,61],{"class":50},[40,412,413],{"class":57},"60",[40,415,127],{"class":67},[40,417,418],{"class":57}," 40",[40,420,127],{"class":67},[40,422,373],{"class":57},[40,424,127],{"class":67},[40,426,427],{"class":57}," 70",[40,429,127],{"class":67},[40,431,432],{"class":50}," \u002F ",[40,434,435],{"class":57},"50",[40,437,127],{"class":67},[40,439,440],{"class":57}," 60",[40,442,127],{"class":67},[40,444,418],{"class":57},[40,446,127],{"class":67},[40,448,373],{"class":57},[40,450,127],{"class":67},[40,452,71],{"class":50},[40,454,456],{"class":42,"line":455},7,[40,457,77],{"class":50},[15,459,460,461,463,464,466],{},"The ",[19,462,359],{}," class rounds three corners and leaves one sharp — producing a teardrop or leaf silhouette. The ",[19,465,401],{}," class uses eight independent values (four horizontal, four vertical) for an organic, asymmetrical blob.",[15,468,469],{},"Blob shapes pair well with solid background colors or subtle gradients. Avoid putting text inside a blob unless the container is large — the curved edges eat into the readable area quickly.",[82,471,473],{"id":472},"rule-of-thumb","Rule of Thumb",[205,475,476,479,482,485],{},[208,477,478],{},"Leaf shape: round 3 corners, leave 1 sharp",[208,480,481],{},"Blob shape: use different percentages for every value",[208,483,484],{},"Keep all blob percentages between 25% and 75% for pleasing results",[208,486,487],{},"Always test with actual content — blobs compress inner space",[10,489,491],{"id":490},"responsive-border-radius","Responsive Border Radius",[15,493,494],{},"Percentage-based radii scale with the element. This matters when components resize across breakpoints.",[31,496,498],{"className":33,"code":497,"language":35,"meta":36,"style":36},".responsive-card {\n  border-radius: 5%;\n}\n",[19,499,500,507,520],{"__ignoreMap":36},[40,501,502,505],{"class":42,"line":43},[40,503,504],{"class":46},".responsive-card",[40,506,51],{"class":50},[40,508,509,511,513,516,518],{"class":42,"line":54},[40,510,58],{"class":57},[40,512,61],{"class":50},[40,514,515],{"class":57},"5",[40,517,127],{"class":67},[40,519,71],{"class":50},[40,521,522],{"class":42,"line":74},[40,523,77],{"class":50},[15,525,526,527,530],{},"On a 400px-wide card, ",[19,528,529],{},"5%"," equals 20px. On a 600px card, it equals 30px. The rounding grows proportionally, keeping the visual weight consistent.",[15,532,533,534,537],{},"If the rounding feels too aggressive on large screens, cap it with ",[19,535,536],{},"min()",":",[31,539,541],{"className":33,"code":540,"language":35,"meta":36,"style":36},".responsive-capped {\n  border-radius: min(5%, 24px);\n}\n",[19,542,543,550,576],{"__ignoreMap":36},[40,544,545,548],{"class":42,"line":43},[40,546,547],{"class":46},".responsive-capped",[40,549,51],{"class":50},[40,551,552,554,556,559,562,564,566,569,571,573],{"class":42,"line":54},[40,553,58],{"class":57},[40,555,61],{"class":50},[40,557,558],{"class":57},"min",[40,560,561],{"class":50},"(",[40,563,515],{"class":57},[40,565,127],{"class":67},[40,567,568],{"class":50},", ",[40,570,174],{"class":57},[40,572,68],{"class":67},[40,574,575],{"class":50},");\n",[40,577,578],{"class":42,"line":74},[40,579,77],{"class":50},[15,581,582],{},"This scales the radius up to 24px, then stops. You get responsive behavior on small screens and a fixed cap on large ones.",[10,584,586],{"id":585},"combining-with-box-shadow","Combining with Box Shadow",[15,588,589],{},"Rounded corners and box shadows amplify each other. A rounded card with layered shadows looks elevated and tactile.",[31,591,593],{"className":33,"code":592,"language":35,"meta":36,"style":36},".elevated-card {\n  border-radius: 16px;\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.08),\n    0 8px 24px rgba(0, 0, 0, 0.12);\n}\n",[19,594,595,602,615,623,661,695],{"__ignoreMap":36},[40,596,597,600],{"class":42,"line":43},[40,598,599],{"class":46},".elevated-card",[40,601,51],{"class":50},[40,603,604,606,608,611,613],{"class":42,"line":54},[40,605,58],{"class":57},[40,607,61],{"class":50},[40,609,610],{"class":57},"16",[40,612,68],{"class":67},[40,614,71],{"class":50},[40,616,617,620],{"class":42,"line":74},[40,618,619],{"class":57},"  box-shadow",[40,621,622],{"class":50},":\n",[40,624,625,628,631,633,636,638,641,643,645,647,649,651,653,655,658],{"class":42,"line":280},[40,626,627],{"class":57},"    0",[40,629,630],{"class":57}," 1",[40,632,68],{"class":67},[40,634,635],{"class":57}," 3",[40,637,68],{"class":67},[40,639,640],{"class":57}," rgba",[40,642,561],{"class":50},[40,644,370],{"class":57},[40,646,568],{"class":50},[40,648,370],{"class":57},[40,650,568],{"class":50},[40,652,370],{"class":57},[40,654,568],{"class":50},[40,656,657],{"class":57},"0.08",[40,659,660],{"class":50},"),\n",[40,662,663,665,668,670,672,674,676,678,680,682,684,686,688,690,693],{"class":42,"line":398},[40,664,627],{"class":57},[40,666,667],{"class":57}," 8",[40,669,68],{"class":67},[40,671,184],{"class":57},[40,673,68],{"class":67},[40,675,640],{"class":57},[40,677,561],{"class":50},[40,679,370],{"class":57},[40,681,568],{"class":50},[40,683,370],{"class":57},[40,685,568],{"class":50},[40,687,370],{"class":57},[40,689,568],{"class":50},[40,691,692],{"class":57},"0.12",[40,694,575],{"class":50},[40,696,697],{"class":42,"line":406},[40,698,77],{"class":50},[82,700,702],{"id":701},"shadow-tips-for-rounded-elements","Shadow Tips for Rounded Elements",[205,704,705,708,711],{},[208,706,707],{},"The shadow follows the border-radius — no extra work needed",[208,709,710],{},"Tight shadows (small offset) reinforce the edge; diffused shadows (large offset) suggest elevation",[208,712,713,714,717],{},"In dark mode, increase shadow opacity to ",[19,715,716],{},"0.3–0.4"," so shadows remain visible against dark surfaces",[82,719,721],{"id":720},"hover-elevation-effect","Hover Elevation Effect",[31,723,725],{"className":33,"code":724,"language":35,"meta":36,"style":36},".hover-card {\n  border-radius: 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  transition: box-shadow 0.2s ease;\n}\n\n.hover-card:hover {\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);\n}\n",[19,726,727,734,746,784,803,807,811,818,857],{"__ignoreMap":36},[40,728,729,732],{"class":42,"line":43},[40,730,731],{"class":46},".hover-card",[40,733,51],{"class":50},[40,735,736,738,740,742,744],{"class":42,"line":54},[40,737,58],{"class":57},[40,739,61],{"class":50},[40,741,610],{"class":57},[40,743,68],{"class":67},[40,745,71],{"class":50},[40,747,748,750,752,754,757,759,761,763,765,767,769,771,773,775,777,779,782],{"class":42,"line":74},[40,749,619],{"class":57},[40,751,61],{"class":50},[40,753,370],{"class":57},[40,755,756],{"class":57}," 2",[40,758,68],{"class":67},[40,760,667],{"class":57},[40,762,68],{"class":67},[40,764,640],{"class":57},[40,766,561],{"class":50},[40,768,370],{"class":57},[40,770,568],{"class":50},[40,772,370],{"class":57},[40,774,568],{"class":50},[40,776,370],{"class":57},[40,778,568],{"class":50},[40,780,781],{"class":57},"0.1",[40,783,575],{"class":50},[40,785,786,789,792,795,798,801],{"class":42,"line":280},[40,787,788],{"class":57},"  transition",[40,790,791],{"class":50},": box-shadow ",[40,793,794],{"class":57},"0.2",[40,796,797],{"class":67},"s",[40,799,800],{"class":57}," ease",[40,802,71],{"class":50},[40,804,805],{"class":42,"line":398},[40,806,77],{"class":50},[40,808,809],{"class":42,"line":406},[40,810,395],{"emptyLinePlaceholder":394},[40,812,813,816],{"class":42,"line":455},[40,814,815],{"class":46},".hover-card:hover",[40,817,51],{"class":50},[40,819,821,823,825,827,829,831,834,836,838,840,842,844,846,848,850,852,855],{"class":42,"line":820},8,[40,822,619],{"class":57},[40,824,61],{"class":50},[40,826,370],{"class":57},[40,828,667],{"class":57},[40,830,68],{"class":67},[40,832,833],{"class":57}," 32",[40,835,68],{"class":67},[40,837,640],{"class":57},[40,839,561],{"class":50},[40,841,370],{"class":57},[40,843,568],{"class":50},[40,845,370],{"class":57},[40,847,568],{"class":50},[40,849,370],{"class":57},[40,851,568],{"class":50},[40,853,854],{"class":57},"0.18",[40,856,575],{"class":50},[40,858,860],{"class":42,"line":859},9,[40,861,77],{"class":50},[15,863,864],{},"The radius stays constant while the shadow deepens on hover. This creates the illusion of the card lifting off the page.",[10,866,868],{"id":867},"overflow-and-clipping","Overflow and Clipping",[15,870,871,872,875],{},"Rounded corners clip the background automatically, but child elements spill past the curve. Add ",[19,873,874],{},"overflow: hidden"," to enforce clipping on content.",[31,877,879],{"className":33,"code":878,"language":35,"meta":36,"style":36},".image-card {\n  border-radius: 16px;\n  overflow: hidden;\n}\n",[19,880,881,888,900,912],{"__ignoreMap":36},[40,882,883,886],{"class":42,"line":43},[40,884,885],{"class":46},".image-card",[40,887,51],{"class":50},[40,889,890,892,894,896,898],{"class":42,"line":54},[40,891,58],{"class":57},[40,893,61],{"class":50},[40,895,610],{"class":57},[40,897,68],{"class":67},[40,899,71],{"class":50},[40,901,902,905,907,910],{"class":42,"line":74},[40,903,904],{"class":57},"  overflow",[40,906,61],{"class":50},[40,908,909],{"class":57},"hidden",[40,911,71],{"class":50},[40,913,914],{"class":42,"line":280},[40,915,77],{"class":50},[15,917,918,919,921],{},"Without ",[19,920,874],{},", images and absolutely-positioned children ignore the rounding. This is one of the most common visual bugs in card layouts.",[10,923,925],{"id":924},"key-takeaways","Key Takeaways",[205,927,928,931,934,943,950,956,962],{},[208,929,930],{},"Use 12–16px for card corners and 6–8px for buttons — consistent sizing beats experimentation",[208,932,933],{},"Four values in shorthand map clockwise from top-left",[208,935,936,939,940,942],{},[19,937,938],{},"border-radius: 9999px"," creates a pill; ",[19,941,341],{}," on a square creates a circle",[208,944,945,946,949],{},"The slash syntax (",[19,947,948],{},"horizontal \u002F vertical",") unlocks leaf and blob shapes",[208,951,952,953,955],{},"Percentage radii scale with element size — cap them with ",[19,954,536],{}," if needed",[208,957,958,959,961],{},"Always add ",[19,960,874],{}," when rounded containers hold images or overflow content",[208,963,964],{},"Layer two box shadows with rounded corners for convincing depth",[10,966,968],{"id":967},"try-it-yourself","Try It Yourself",[15,970,971,972,977,978,982],{},"Experiment with individual corner values and see the shape update in real time with our ",[973,974,976],"a",{"href":975},"\u002Ftools\u002Fborder-radius","Border Radius Generator",". Pair your rounded shapes with polished elevation using the ",[973,979,981],{"href":980},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator"," — then copy both rules straight into your stylesheet.",[984,985,986],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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}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);}",{"title":36,"searchDepth":54,"depth":54,"links":988},[989,990,993,996,999,1002,1003,1007,1008,1009],{"id":12,"depth":54,"text":13},{"id":25,"depth":54,"text":26,"children":991},[992],{"id":84,"depth":74,"text":85},{"id":149,"depth":54,"text":150,"children":994},[995],{"id":202,"depth":74,"text":203},{"id":230,"depth":54,"text":231,"children":997},[998],{"id":292,"depth":74,"text":293},{"id":345,"depth":54,"text":346,"children":1000},[1001],{"id":472,"depth":74,"text":473},{"id":490,"depth":54,"text":491},{"id":585,"depth":54,"text":586,"children":1004},[1005,1006],{"id":701,"depth":74,"text":702},{"id":720,"depth":74,"text":721},{"id":867,"depth":54,"text":868},{"id":924,"depth":54,"text":925},{"id":967,"depth":54,"text":968},"2026-05-28","Step-by-step tutorial for creating simple to complex rounded corner shapes with CSS border-radius.","md",{"immutable":394},"\u002Fguides\u002Fcss-rounded-corners-tutorial",{"title":5,"description":1011},"guides\u002Fcss-rounded-corners-tutorial","OFavagEx_6On2F6cIM9jgC_MtpvzGH-Jgb1W_yztq_E",1780401328671]