[{"data":1,"prerenderedAt":1584},["ShallowReactive",2],{"guide-complex-css-shapes":3},{"id":4,"title":5,"body":6,"date":1574,"description":1575,"extension":1576,"meta":1577,"navigation":961,"path":1580,"readingTime":706,"seo":1581,"stem":1582,"__hash__":1583},"guides\u002Fguides\u002Fcomplex-css-shapes.md","Creating Complex CSS Shapes with Border Radius and Clip-Path",{"type":7,"value":8,"toc":1556},"minimark",[9,14,23,41,45,51,135,147,150,154,159,250,253,257,322,325,329,412,415,419,427,536,540,715,719,728,841,847,851,857,1019,1022,1025,1322,1326,1332,1411,1414,1418,1478,1482,1519,1523,1532,1536,1552],[10,11,13],"h2",{"id":12},"beyond-rounded-corners","Beyond Rounded Corners",[15,16,17,18,22],"p",{},"Most developers use ",[19,20,21],"code",{},"border-radius"," with a single value to round all corners equally. But the property accepts up to eight values — four for each corner's horizontal and vertical radii — enabling shapes far beyond simple circles and pills.",[15,24,25,26,28,29,32,33,36,37,40],{},"Combine ",[19,27,21],{}," with ",[19,30,31],{},"clip-path",", ",[19,34,35],{},"transform",", and ",[19,38,39],{},"rotate",", and you can create organic blobs, leaves, eggs, and complex geometric shapes entirely in CSS — no SVG or Canvas needed.",[10,42,44],{"id":43},"the-eight-value-syntax","The Eight-Value Syntax",[15,46,47,48,50],{},"The full ",[19,49,21],{}," syntax separates horizontal and vertical radii with a slash:",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-css shiki shiki-themes github-light github-dark",".element {\n  border-radius: 80px 40px 60px 30px \u002F 50px 70px 30px 60px;\n}\n","css","",[19,59,60,73,129],{"__ignoreMap":57},[61,62,65,69],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sScJk",".element",[61,70,72],{"class":71},"sVt8B"," {\n",[61,74,76,80,83,86,90,93,95,98,100,103,105,108,111,113,116,118,120,122,124,126],{"class":63,"line":75},2,[61,77,79],{"class":78},"sj4cs","  border-radius",[61,81,82],{"class":71},": ",[61,84,85],{"class":78},"80",[61,87,89],{"class":88},"szBVR","px",[61,91,92],{"class":78}," 40",[61,94,89],{"class":88},[61,96,97],{"class":78}," 60",[61,99,89],{"class":88},[61,101,102],{"class":78}," 30",[61,104,89],{"class":88},[61,106,107],{"class":71}," \u002F ",[61,109,110],{"class":78},"50",[61,112,89],{"class":88},[61,114,115],{"class":78}," 70",[61,117,89],{"class":88},[61,119,102],{"class":78},[61,121,89],{"class":88},[61,123,97],{"class":78},[61,125,89],{"class":88},[61,127,128],{"class":71},";\n",[61,130,132],{"class":63,"line":131},3,[61,133,134],{"class":71},"}\n",[15,136,137,138,142,143,146],{},"The four values before the slash are top-left, top-right, bottom-right, bottom-left ",[139,140,141],"strong",{},"horizontal"," radii. The four after are the corresponding ",[139,144,145],{},"vertical"," radii.",[15,148,149],{},"When the horizontal and vertical radii differ at the same corner, you get an elliptical curve instead of a circular one — and that is the key to organic shapes.",[10,151,153],{"id":152},"shape-recipes","Shape Recipes",[155,156,158],"h3",{"id":157},"egg-shape","Egg Shape",[52,160,162],{"className":54,"code":161,"language":56,"meta":57,"style":57},".egg {\n  width: 126px;\n  height: 180px;\n  border-radius: 50% 50% 50% 50% \u002F 60% 60% 40% 40%;\n}\n",[19,163,164,171,185,199,245],{"__ignoreMap":57},[61,165,166,169],{"class":63,"line":64},[61,167,168],{"class":67},".egg",[61,170,72],{"class":71},[61,172,173,176,178,181,183],{"class":63,"line":75},[61,174,175],{"class":78},"  width",[61,177,82],{"class":71},[61,179,180],{"class":78},"126",[61,182,89],{"class":88},[61,184,128],{"class":71},[61,186,187,190,192,195,197],{"class":63,"line":131},[61,188,189],{"class":78},"  height",[61,191,82],{"class":71},[61,193,194],{"class":78},"180",[61,196,89],{"class":88},[61,198,128],{"class":71},[61,200,202,204,206,208,211,214,216,218,220,222,224,226,229,231,233,235,237,239,241,243],{"class":63,"line":201},4,[61,203,79],{"class":78},[61,205,82],{"class":71},[61,207,110],{"class":78},[61,209,210],{"class":88},"%",[61,212,213],{"class":78}," 50",[61,215,210],{"class":88},[61,217,213],{"class":78},[61,219,210],{"class":88},[61,221,213],{"class":78},[61,223,210],{"class":88},[61,225,107],{"class":71},[61,227,228],{"class":78},"60",[61,230,210],{"class":88},[61,232,97],{"class":78},[61,234,210],{"class":88},[61,236,92],{"class":78},[61,238,210],{"class":88},[61,240,92],{"class":78},[61,242,210],{"class":88},[61,244,128],{"class":71},[61,246,248],{"class":63,"line":247},5,[61,249,134],{"class":71},[15,251,252],{},"The top corners have larger vertical radii, making the top wider. The bottom corners have smaller vertical radii, tapering the bottom.",[155,254,256],{"id":255},"leaf-shape","Leaf Shape",[52,258,260],{"className":54,"code":259,"language":56,"meta":57,"style":57},".leaf {\n  width: 120px;\n  height: 160px;\n  border-radius: 0 80% 0 80%;\n}\n",[19,261,262,269,282,295,318],{"__ignoreMap":57},[61,263,264,267],{"class":63,"line":64},[61,265,266],{"class":67},".leaf",[61,268,72],{"class":71},[61,270,271,273,275,278,280],{"class":63,"line":75},[61,272,175],{"class":78},[61,274,82],{"class":71},[61,276,277],{"class":78},"120",[61,279,89],{"class":88},[61,281,128],{"class":71},[61,283,284,286,288,291,293],{"class":63,"line":131},[61,285,189],{"class":78},[61,287,82],{"class":71},[61,289,290],{"class":78},"160",[61,292,89],{"class":88},[61,294,128],{"class":71},[61,296,297,299,301,304,307,309,312,314,316],{"class":63,"line":201},[61,298,79],{"class":78},[61,300,82],{"class":71},[61,302,303],{"class":78},"0",[61,305,306],{"class":78}," 80",[61,308,210],{"class":88},[61,310,311],{"class":78}," 0",[61,313,306],{"class":78},[61,315,210],{"class":88},[61,317,128],{"class":71},[61,319,320],{"class":63,"line":247},[61,321,134],{"class":71},[15,323,324],{},"Only two opposite corners are rounded, creating a pointed leaf with curves on adjacent sides.",[155,326,328],{"id":327},"blob-shape","Blob Shape",[52,330,332],{"className":54,"code":331,"language":56,"meta":57,"style":57},".blob {\n  width: 200px;\n  height: 200px;\n  border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n}\n",[19,333,334,341,354,366,408],{"__ignoreMap":57},[61,335,336,339],{"class":63,"line":64},[61,337,338],{"class":67},".blob",[61,340,72],{"class":71},[61,342,343,345,347,350,352],{"class":63,"line":75},[61,344,175],{"class":78},[61,346,82],{"class":71},[61,348,349],{"class":78},"200",[61,351,89],{"class":88},[61,353,128],{"class":71},[61,355,356,358,360,362,364],{"class":63,"line":131},[61,357,189],{"class":78},[61,359,82],{"class":71},[61,361,349],{"class":78},[61,363,89],{"class":88},[61,365,128],{"class":71},[61,367,368,370,372,374,376,378,380,382,384,386,388,390,392,394,396,398,400,402,404,406],{"class":63,"line":201},[61,369,79],{"class":78},[61,371,82],{"class":71},[61,373,228],{"class":78},[61,375,210],{"class":88},[61,377,92],{"class":78},[61,379,210],{"class":88},[61,381,102],{"class":78},[61,383,210],{"class":88},[61,385,115],{"class":78},[61,387,210],{"class":88},[61,389,107],{"class":71},[61,391,228],{"class":78},[61,393,210],{"class":88},[61,395,102],{"class":78},[61,397,210],{"class":88},[61,399,115],{"class":78},[61,401,210],{"class":88},[61,403,92],{"class":78},[61,405,210],{"class":88},[61,407,128],{"class":71},[61,409,410],{"class":63,"line":247},[61,411,134],{"class":71},[15,413,414],{},"Asymmetric radii on both axes create an organic, irregular shape. No two blobs look the same — adjust the percentages to taste.",[155,416,418],{"id":417},"pentagon-with-clip-path","Pentagon (with clip-path)",[15,420,421,423,424,426],{},[19,422,21],{}," alone cannot create straight-edged polygons. For those, use ",[19,425,31],{},":",[52,428,430],{"className":54,"code":429,"language":56,"meta":57,"style":57},".pentagon {\n  width: 200px;\n  height: 200px;\n  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n}\n",[19,431,432,439,451,463,532],{"__ignoreMap":57},[61,433,434,437],{"class":63,"line":64},[61,435,436],{"class":67},".pentagon",[61,438,72],{"class":71},[61,440,441,443,445,447,449],{"class":63,"line":75},[61,442,175],{"class":78},[61,444,82],{"class":71},[61,446,349],{"class":78},[61,448,89],{"class":88},[61,450,128],{"class":71},[61,452,453,455,457,459,461],{"class":63,"line":131},[61,454,189],{"class":78},[61,456,82],{"class":71},[61,458,349],{"class":78},[61,460,89],{"class":88},[61,462,128],{"class":71},[61,464,465,468,470,473,476,478,480,482,484,486,489,491,494,496,498,501,503,506,508,510,513,515,517,519,521,523,525,527,529],{"class":63,"line":201},[61,466,467],{"class":78},"  clip-path",[61,469,82],{"class":71},[61,471,472],{"class":78},"polygon",[61,474,475],{"class":71},"(",[61,477,110],{"class":78},[61,479,210],{"class":88},[61,481,311],{"class":78},[61,483,210],{"class":88},[61,485,32],{"class":71},[61,487,488],{"class":78},"100",[61,490,210],{"class":88},[61,492,493],{"class":78}," 38",[61,495,210],{"class":88},[61,497,32],{"class":71},[61,499,500],{"class":78},"82",[61,502,210],{"class":88},[61,504,505],{"class":78}," 100",[61,507,210],{"class":88},[61,509,32],{"class":71},[61,511,512],{"class":78},"18",[61,514,210],{"class":88},[61,516,505],{"class":78},[61,518,210],{"class":88},[61,520,32],{"class":71},[61,522,303],{"class":78},[61,524,210],{"class":88},[61,526,493],{"class":78},[61,528,210],{"class":88},[61,530,531],{"class":71},");\n",[61,533,534],{"class":63,"line":247},[61,535,134],{"class":71},[155,537,539],{"id":538},"star-with-clip-path","Star (with clip-path)",[52,541,543],{"className":54,"code":542,"language":56,"meta":57,"style":57},".star {\n  width: 200px;\n  height: 200px;\n  clip-path: polygon(\n    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,\n    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%\n  );\n}\n",[19,544,545,552,564,576,587,648,704,710],{"__ignoreMap":57},[61,546,547,550],{"class":63,"line":64},[61,548,549],{"class":67},".star",[61,551,72],{"class":71},[61,553,554,556,558,560,562],{"class":63,"line":75},[61,555,175],{"class":78},[61,557,82],{"class":71},[61,559,349],{"class":78},[61,561,89],{"class":88},[61,563,128],{"class":71},[61,565,566,568,570,572,574],{"class":63,"line":131},[61,567,189],{"class":78},[61,569,82],{"class":71},[61,571,349],{"class":78},[61,573,89],{"class":88},[61,575,128],{"class":71},[61,577,578,580,582,584],{"class":63,"line":201},[61,579,467],{"class":78},[61,581,82],{"class":71},[61,583,472],{"class":78},[61,585,586],{"class":71},"(\n",[61,588,589,592,594,596,598,600,603,605,608,610,612,615,617,619,621,623,626,628,631,633,635,638,640,643,645],{"class":63,"line":247},[61,590,591],{"class":78},"    50",[61,593,210],{"class":88},[61,595,311],{"class":78},[61,597,210],{"class":88},[61,599,32],{"class":71},[61,601,602],{"class":78},"61",[61,604,210],{"class":88},[61,606,607],{"class":78}," 35",[61,609,210],{"class":88},[61,611,32],{"class":71},[61,613,614],{"class":78},"98",[61,616,210],{"class":88},[61,618,607],{"class":78},[61,620,210],{"class":88},[61,622,32],{"class":71},[61,624,625],{"class":78},"68",[61,627,210],{"class":88},[61,629,630],{"class":78}," 57",[61,632,210],{"class":88},[61,634,32],{"class":71},[61,636,637],{"class":78},"79",[61,639,210],{"class":88},[61,641,642],{"class":78}," 91",[61,644,210],{"class":88},[61,646,647],{"class":71},",\n",[61,649,651,653,655,657,659,661,664,666,668,670,672,675,677,679,681,683,686,688,690,692,694,697,699,701],{"class":63,"line":650},6,[61,652,591],{"class":78},[61,654,210],{"class":88},[61,656,115],{"class":78},[61,658,210],{"class":88},[61,660,32],{"class":71},[61,662,663],{"class":78},"21",[61,665,210],{"class":88},[61,667,642],{"class":78},[61,669,210],{"class":88},[61,671,32],{"class":71},[61,673,674],{"class":78},"32",[61,676,210],{"class":88},[61,678,630],{"class":78},[61,680,210],{"class":88},[61,682,32],{"class":71},[61,684,685],{"class":78},"2",[61,687,210],{"class":88},[61,689,607],{"class":78},[61,691,210],{"class":88},[61,693,32],{"class":71},[61,695,696],{"class":78},"39",[61,698,210],{"class":88},[61,700,607],{"class":78},[61,702,703],{"class":88},"%\n",[61,705,707],{"class":63,"line":706},7,[61,708,709],{"class":71},"  );\n",[61,711,713],{"class":63,"line":712},8,[61,714,134],{"class":71},[10,716,718],{"id":717},"combining-border-radius-and-clip-path","Combining Border Radius and Clip-Path",[15,720,721,722,724,725,727],{},"You can use both properties together: ",[19,723,31],{}," defines the overall shape, and ",[19,726,21],{}," softens the clipped edges.",[52,729,731],{"className":54,"code":730,"language":56,"meta":57,"style":57},".soft-pentagon {\n  width: 200px;\n  height: 200px;\n  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);\n  border-radius: 10px;\n}\n",[19,732,733,740,752,764,824,837],{"__ignoreMap":57},[61,734,735,738],{"class":63,"line":64},[61,736,737],{"class":67},".soft-pentagon",[61,739,72],{"class":71},[61,741,742,744,746,748,750],{"class":63,"line":75},[61,743,175],{"class":78},[61,745,82],{"class":71},[61,747,349],{"class":78},[61,749,89],{"class":88},[61,751,128],{"class":71},[61,753,754,756,758,760,762],{"class":63,"line":131},[61,755,189],{"class":78},[61,757,82],{"class":71},[61,759,349],{"class":78},[61,761,89],{"class":88},[61,763,128],{"class":71},[61,765,766,768,770,772,774,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,806,808,810,812,814,816,818,820,822],{"class":63,"line":201},[61,767,467],{"class":78},[61,769,82],{"class":71},[61,771,472],{"class":78},[61,773,475],{"class":71},[61,775,110],{"class":78},[61,777,210],{"class":88},[61,779,311],{"class":78},[61,781,210],{"class":88},[61,783,32],{"class":71},[61,785,488],{"class":78},[61,787,210],{"class":88},[61,789,493],{"class":78},[61,791,210],{"class":88},[61,793,32],{"class":71},[61,795,500],{"class":78},[61,797,210],{"class":88},[61,799,505],{"class":78},[61,801,210],{"class":88},[61,803,32],{"class":71},[61,805,512],{"class":78},[61,807,210],{"class":88},[61,809,505],{"class":78},[61,811,210],{"class":88},[61,813,32],{"class":71},[61,815,303],{"class":78},[61,817,210],{"class":88},[61,819,493],{"class":78},[61,821,210],{"class":88},[61,823,531],{"class":71},[61,825,826,828,830,833,835],{"class":63,"line":247},[61,827,79],{"class":78},[61,829,82],{"class":71},[61,831,832],{"class":78},"10",[61,834,89],{"class":88},[61,836,128],{"class":71},[61,838,839],{"class":63,"line":650},[61,840,134],{"class":71},[15,842,843,844,846],{},"Be aware that ",[19,845,21],{}," only softens the path where the clip allows — clipped-away corners receive no rounding.",[10,848,850],{"id":849},"animating-organic-shapes","Animating Organic Shapes",[15,852,853,854,856],{},"Blob shapes look dynamic when animated. Transition between two ",[19,855,21],{}," value sets:",[52,858,860],{"className":54,"code":859,"language":56,"meta":57,"style":57},".blob {\n  width: 200px;\n  height: 200px;\n  border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%;\n  transition: border-radius 0.8s ease;\n}\n\n.blob:hover {\n  border-radius: 30% 60% 70% 40% \u002F 50% 60% 30% 60%;\n}\n",[19,861,862,868,880,892,934,953,957,963,970,1014],{"__ignoreMap":57},[61,863,864,866],{"class":63,"line":64},[61,865,338],{"class":67},[61,867,72],{"class":71},[61,869,870,872,874,876,878],{"class":63,"line":75},[61,871,175],{"class":78},[61,873,82],{"class":71},[61,875,349],{"class":78},[61,877,89],{"class":88},[61,879,128],{"class":71},[61,881,882,884,886,888,890],{"class":63,"line":131},[61,883,189],{"class":78},[61,885,82],{"class":71},[61,887,349],{"class":78},[61,889,89],{"class":88},[61,891,128],{"class":71},[61,893,894,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924,926,928,930,932],{"class":63,"line":201},[61,895,79],{"class":78},[61,897,82],{"class":71},[61,899,228],{"class":78},[61,901,210],{"class":88},[61,903,92],{"class":78},[61,905,210],{"class":88},[61,907,102],{"class":78},[61,909,210],{"class":88},[61,911,115],{"class":78},[61,913,210],{"class":88},[61,915,107],{"class":71},[61,917,228],{"class":78},[61,919,210],{"class":88},[61,921,102],{"class":78},[61,923,210],{"class":88},[61,925,115],{"class":78},[61,927,210],{"class":88},[61,929,92],{"class":78},[61,931,210],{"class":88},[61,933,128],{"class":71},[61,935,936,939,942,945,948,951],{"class":63,"line":247},[61,937,938],{"class":78},"  transition",[61,940,941],{"class":71},": border-radius ",[61,943,944],{"class":78},"0.8",[61,946,947],{"class":88},"s",[61,949,950],{"class":78}," ease",[61,952,128],{"class":71},[61,954,955],{"class":63,"line":650},[61,956,134],{"class":71},[61,958,959],{"class":63,"line":706},[61,960,962],{"emptyLinePlaceholder":961},true,"\n",[61,964,965,968],{"class":63,"line":712},[61,966,967],{"class":67},".blob:hover",[61,969,72],{"class":71},[61,971,973,975,977,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012],{"class":63,"line":972},9,[61,974,79],{"class":78},[61,976,82],{"class":71},[61,978,979],{"class":78},"30",[61,981,210],{"class":88},[61,983,97],{"class":78},[61,985,210],{"class":88},[61,987,115],{"class":78},[61,989,210],{"class":88},[61,991,92],{"class":78},[61,993,210],{"class":88},[61,995,107],{"class":71},[61,997,110],{"class":78},[61,999,210],{"class":88},[61,1001,97],{"class":78},[61,1003,210],{"class":88},[61,1005,102],{"class":78},[61,1007,210],{"class":88},[61,1009,97],{"class":78},[61,1011,210],{"class":88},[61,1013,128],{"class":71},[61,1015,1017],{"class":63,"line":1016},10,[61,1018,134],{"class":71},[15,1020,1021],{},"Because each corner animates independently, the shape morphs fluidly between two organic forms.",[15,1023,1024],{},"For continuous motion, use keyframes:",[52,1026,1028],{"className":54,"code":1027,"language":56,"meta":57,"style":57},"@keyframes morph {\n  0%   { border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%; }\n  25%  { border-radius: 30% 60% 70% 40% \u002F 50% 60% 30% 60%; }\n  50%  { border-radius: 50% 30% 50% 70% \u002F 40% 50% 60% 50%; }\n  75%  { border-radius: 40% 50% 60% 50% \u002F 60% 40% 50% 60%; }\n  100% { border-radius: 60% 40% 30% 70% \u002F 60% 30% 70% 40%; }\n}\n\n.animated-blob {\n  animation: morph 8s ease-in-out infinite;\n}\n",[19,1029,1030,1041,1090,1138,1186,1233,1281,1285,1289,1296,1317],{"__ignoreMap":57},[61,1031,1032,1035,1039],{"class":63,"line":64},[61,1033,1034],{"class":88},"@keyframes",[61,1036,1038],{"class":1037},"s4XuR"," morph",[61,1040,72],{"class":71},[61,1042,1043,1046,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":63,"line":75},[61,1044,1045],{"class":67},"  0%",[61,1047,1048],{"class":71},"   { ",[61,1050,21],{"class":78},[61,1052,82],{"class":71},[61,1054,228],{"class":78},[61,1056,210],{"class":88},[61,1058,92],{"class":78},[61,1060,210],{"class":88},[61,1062,102],{"class":78},[61,1064,210],{"class":88},[61,1066,115],{"class":78},[61,1068,210],{"class":88},[61,1070,107],{"class":71},[61,1072,228],{"class":78},[61,1074,210],{"class":88},[61,1076,102],{"class":78},[61,1078,210],{"class":88},[61,1080,115],{"class":78},[61,1082,210],{"class":88},[61,1084,92],{"class":78},[61,1086,210],{"class":88},[61,1088,1089],{"class":71},"; }\n",[61,1091,1092,1095,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136],{"class":63,"line":131},[61,1093,1094],{"class":67},"  25%",[61,1096,1097],{"class":71},"  { ",[61,1099,21],{"class":78},[61,1101,82],{"class":71},[61,1103,979],{"class":78},[61,1105,210],{"class":88},[61,1107,97],{"class":78},[61,1109,210],{"class":88},[61,1111,115],{"class":78},[61,1113,210],{"class":88},[61,1115,92],{"class":78},[61,1117,210],{"class":88},[61,1119,107],{"class":71},[61,1121,110],{"class":78},[61,1123,210],{"class":88},[61,1125,97],{"class":78},[61,1127,210],{"class":88},[61,1129,102],{"class":78},[61,1131,210],{"class":88},[61,1133,97],{"class":78},[61,1135,210],{"class":88},[61,1137,1089],{"class":71},[61,1139,1140,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165,1167,1170,1172,1174,1176,1178,1180,1182,1184],{"class":63,"line":201},[61,1141,1142],{"class":67},"  50%",[61,1144,1097],{"class":71},[61,1146,21],{"class":78},[61,1148,82],{"class":71},[61,1150,110],{"class":78},[61,1152,210],{"class":88},[61,1154,102],{"class":78},[61,1156,210],{"class":88},[61,1158,213],{"class":78},[61,1160,210],{"class":88},[61,1162,115],{"class":78},[61,1164,210],{"class":88},[61,1166,107],{"class":71},[61,1168,1169],{"class":78},"40",[61,1171,210],{"class":88},[61,1173,213],{"class":78},[61,1175,210],{"class":88},[61,1177,97],{"class":78},[61,1179,210],{"class":88},[61,1181,213],{"class":78},[61,1183,210],{"class":88},[61,1185,1089],{"class":71},[61,1187,1188,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231],{"class":63,"line":247},[61,1189,1190],{"class":67},"  75%",[61,1192,1097],{"class":71},[61,1194,21],{"class":78},[61,1196,82],{"class":71},[61,1198,1169],{"class":78},[61,1200,210],{"class":88},[61,1202,213],{"class":78},[61,1204,210],{"class":88},[61,1206,97],{"class":78},[61,1208,210],{"class":88},[61,1210,213],{"class":78},[61,1212,210],{"class":88},[61,1214,107],{"class":71},[61,1216,228],{"class":78},[61,1218,210],{"class":88},[61,1220,92],{"class":78},[61,1222,210],{"class":88},[61,1224,213],{"class":78},[61,1226,210],{"class":88},[61,1228,97],{"class":78},[61,1230,210],{"class":88},[61,1232,1089],{"class":71},[61,1234,1235,1238,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279],{"class":63,"line":650},[61,1236,1237],{"class":67},"  100%",[61,1239,1240],{"class":71}," { ",[61,1242,21],{"class":78},[61,1244,82],{"class":71},[61,1246,228],{"class":78},[61,1248,210],{"class":88},[61,1250,92],{"class":78},[61,1252,210],{"class":88},[61,1254,102],{"class":78},[61,1256,210],{"class":88},[61,1258,115],{"class":78},[61,1260,210],{"class":88},[61,1262,107],{"class":71},[61,1264,228],{"class":78},[61,1266,210],{"class":88},[61,1268,102],{"class":78},[61,1270,210],{"class":88},[61,1272,115],{"class":78},[61,1274,210],{"class":88},[61,1276,92],{"class":78},[61,1278,210],{"class":88},[61,1280,1089],{"class":71},[61,1282,1283],{"class":63,"line":706},[61,1284,134],{"class":71},[61,1286,1287],{"class":63,"line":712},[61,1288,962],{"emptyLinePlaceholder":961},[61,1290,1291,1294],{"class":63,"line":972},[61,1292,1293],{"class":67},".animated-blob",[61,1295,72],{"class":71},[61,1297,1298,1301,1304,1307,1309,1312,1315],{"class":63,"line":1016},[61,1299,1300],{"class":78},"  animation",[61,1302,1303],{"class":71},": morph ",[61,1305,1306],{"class":78},"8",[61,1308,947],{"class":88},[61,1310,1311],{"class":78}," ease-in-out",[61,1313,1314],{"class":78}," infinite",[61,1316,128],{"class":71},[61,1318,1320],{"class":63,"line":1319},11,[61,1321,134],{"class":71},[10,1323,1325],{"id":1324},"rotation-for-variety","Rotation for Variety",[15,1327,1328,1329,1331],{},"The same ",[19,1330,21],{}," values create different shapes depending on the element's aspect ratio and rotation:",[52,1333,1335],{"className":54,"code":1334,"language":56,"meta":57,"style":57},".leaf-variant {\n  width: 100px;\n  height: 180px;\n  border-radius: 0 80% 0 80%;\n  transform: rotate(-30deg);\n}\n",[19,1336,1337,1344,1356,1368,1388,1407],{"__ignoreMap":57},[61,1338,1339,1342],{"class":63,"line":64},[61,1340,1341],{"class":67},".leaf-variant",[61,1343,72],{"class":71},[61,1345,1346,1348,1350,1352,1354],{"class":63,"line":75},[61,1347,175],{"class":78},[61,1349,82],{"class":71},[61,1351,488],{"class":78},[61,1353,89],{"class":88},[61,1355,128],{"class":71},[61,1357,1358,1360,1362,1364,1366],{"class":63,"line":131},[61,1359,189],{"class":78},[61,1361,82],{"class":71},[61,1363,194],{"class":78},[61,1365,89],{"class":88},[61,1367,128],{"class":71},[61,1369,1370,1372,1374,1376,1378,1380,1382,1384,1386],{"class":63,"line":201},[61,1371,79],{"class":78},[61,1373,82],{"class":71},[61,1375,303],{"class":78},[61,1377,306],{"class":78},[61,1379,210],{"class":88},[61,1381,311],{"class":78},[61,1383,306],{"class":78},[61,1385,210],{"class":88},[61,1387,128],{"class":71},[61,1389,1390,1393,1395,1397,1399,1402,1405],{"class":63,"line":247},[61,1391,1392],{"class":78},"  transform",[61,1394,82],{"class":71},[61,1396,39],{"class":78},[61,1398,475],{"class":71},[61,1400,1401],{"class":78},"-30",[61,1403,1404],{"class":88},"deg",[61,1406,531],{"class":71},[61,1408,1409],{"class":63,"line":650},[61,1410,134],{"class":71},[15,1412,1413],{},"A simple rotation transforms a leaf into a water droplet or a flame shape.",[10,1415,1417],{"id":1416},"practical-use-cases","Practical Use Cases",[1419,1420,1421,1434],"table",{},[1422,1423,1424],"thead",{},[1425,1426,1427,1431],"tr",{},[1428,1429,1430],"th",{},"Shape",[1428,1432,1433],{},"Use Case",[1435,1436,1437,1446,1454,1462,1470],"tbody",{},[1425,1438,1439,1443],{},[1440,1441,1442],"td",{},"Pill",[1440,1444,1445],{},"Buttons, tags, badges",[1425,1447,1448,1451],{},[1440,1449,1450],{},"Egg",[1440,1452,1453],{},"Avatars, profile images",[1425,1455,1456,1459],{},[1440,1457,1458],{},"Blob",[1440,1460,1461],{},"Hero backgrounds, decorative elements",[1425,1463,1464,1467],{},[1440,1465,1466],{},"Leaf",[1440,1468,1469],{},"Eco\u002Fnature branding, bullet points",[1425,1471,1472,1475],{},[1440,1473,1474],{},"Pentagon\u002FStar",[1440,1476,1477],{},"Icons, badges, rating indicators",[10,1479,1481],{"id":1480},"key-takeaways","Key Takeaways",[1483,1484,1485,1492,1495,1502,1510,1516],"ul",{},[1486,1487,1488,1489,1491],"li",{},"The eight-value ",[19,1490,21],{}," syntax (horizontal\u002Fvertical) enables elliptical corners and organic shapes",[1486,1493,1494],{},"Asymmetric radii produce blobs, eggs, and leaves — no SVG needed",[1486,1496,1497,1498,1501],{},"Use ",[19,1499,1500],{},"clip-path: polygon()"," for straight-edged shapes that border-radius cannot create",[1486,1503,25,1504,1506,1507,1509],{},[19,1505,21],{}," and ",[19,1508,31],{}," for soft polygon shapes",[1486,1511,1512,1513,1515],{},"Animate between ",[19,1514,21],{}," states for morphing blob effects",[1486,1517,1518],{},"Rotation and aspect ratio multiply the variety of shapes from the same radius values",[10,1520,1522],{"id":1521},"try-it-yourself","Try It Yourself",[15,1524,1525,1526,1531],{},"Experiment with border-radius values interactively using our ",[1527,1528,1530],"a",{"href":1529},"\u002Ftools\u002Fborder-radius","Border Radius Generator",". Drag individual corner controls, preview shapes in real time, and copy the CSS.",[10,1533,1535],{"id":1534},"related-guides","Related Guides",[1483,1537,1538,1545],{},[1486,1539,1540,1544],{},[1527,1541,1543],{"href":1542},"\u002Fguides\u002Fborder-radius-guide","Border Radius Guide"," — syntax, individual corners, and percentage-based shapes",[1486,1546,1547,1551],{},[1527,1548,1550],{"href":1549},"\u002Fguides\u002Fcss-rounded-corners-tutorial","CSS Rounded Corners Tutorial"," — step-by-step practical examples",[1553,1554,1555],"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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":57,"searchDepth":75,"depth":75,"links":1557},[1558,1559,1560,1567,1568,1569,1570,1571,1572,1573],{"id":12,"depth":75,"text":13},{"id":43,"depth":75,"text":44},{"id":152,"depth":75,"text":153,"children":1561},[1562,1563,1564,1565,1566],{"id":157,"depth":131,"text":158},{"id":255,"depth":131,"text":256},{"id":327,"depth":131,"text":328},{"id":417,"depth":131,"text":418},{"id":538,"depth":131,"text":539},{"id":717,"depth":75,"text":718},{"id":849,"depth":75,"text":850},{"id":1324,"depth":75,"text":1325},{"id":1416,"depth":75,"text":1417},{"id":1480,"depth":75,"text":1481},{"id":1521,"depth":75,"text":1522},{"id":1534,"depth":75,"text":1535},"2026-05-28","Go beyond rounded corners — learn how border-radius and clip-path combine to create organic blobs, leaf shapes, eggs, and complex geometric forms in CSS.","md",{"keywords":1578,"immutable":961},[21,1579],"complex-css-shapes","\u002Fguides\u002Fcomplex-css-shapes",{"title":5,"description":1575},"guides\u002Fcomplex-css-shapes","UGPoIdmYPGTAfqRt496W5S83CBh6_mnH6CyyzaIYhGQ",1780401332385]