[{"data":1,"prerenderedAt":1810},["ShallowReactive",2],{"guide-css-shapes-and-borders":3},{"id":4,"title":5,"body":6,"date":1802,"description":1803,"extension":1804,"meta":1805,"navigation":105,"path":1806,"readingTime":140,"seo":1807,"stem":1808,"__hash__":1809},"guides\u002Fguides\u002Fcss-shapes-and-borders.md","CSS Shapes and Borders",{"type":7,"value":8,"toc":1779},"minimark",[9,14,31,34,38,41,166,169,174,245,248,252,258,328,331,364,367,371,381,505,509,519,560,563,567,606,613,617,620,740,744,798,801,805,815,919,928,932,941,1224,1228,1318,1330,1334,1343,1424,1433,1437,1442,1450,1611,1619,1623,1626,1647,1686,1690,1757,1761,1775],[10,11,13],"h2",{"id":12},"beyond-the-rectangle","Beyond the Rectangle",[15,16,17,18,22,23,26,27,30],"p",{},"Every HTML element starts as a rectangle. CSS gives you two powerful tools to break out of that box: ",[19,20,21],"code",{},"border-radius"," reshapes the corners, and ",[19,24,25],{},"border"," draws visible edges. Combined — and paired with techniques like clipping and overflow — they produce leaf shapes, droplets, diamonds, and image masks that look nothing like a ",[19,28,29],{},"\u003Cdiv>",".",[15,32,33],{},"This guide shows you how.",[10,35,37],{"id":36},"leaf-and-droplet-shapes","Leaf and Droplet Shapes",[15,39,40],{},"Rounding three corners while leaving one sharp creates a natural, leaf-like silhouette.",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-css shiki shiki-themes github-light github-dark",".leaf {\n  border-radius: 0 50% 50% 50%;\n}\n\n.droplet {\n  border-radius: 0 50% 50% 50%;\n  transform: rotate(45deg);\n}\n","css","",[19,49,50,63,94,100,107,115,138,161],{"__ignoreMap":47},[51,52,55,59],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sScJk",".leaf",[51,60,62],{"class":61},"sVt8B"," {\n",[51,64,66,70,73,76,79,83,85,87,89,91],{"class":53,"line":65},2,[51,67,69],{"class":68},"sj4cs","  border-radius",[51,71,72],{"class":61},": ",[51,74,75],{"class":68},"0",[51,77,78],{"class":68}," 50",[51,80,82],{"class":81},"szBVR","%",[51,84,78],{"class":68},[51,86,82],{"class":81},[51,88,78],{"class":68},[51,90,82],{"class":81},[51,92,93],{"class":61},";\n",[51,95,97],{"class":53,"line":96},3,[51,98,99],{"class":61},"}\n",[51,101,103],{"class":53,"line":102},4,[51,104,106],{"emptyLinePlaceholder":105},true,"\n",[51,108,110,113],{"class":53,"line":109},5,[51,111,112],{"class":57},".droplet",[51,114,62],{"class":61},[51,116,118,120,122,124,126,128,130,132,134,136],{"class":53,"line":117},6,[51,119,69],{"class":68},[51,121,72],{"class":61},[51,123,75],{"class":68},[51,125,78],{"class":68},[51,127,82],{"class":81},[51,129,78],{"class":68},[51,131,82],{"class":81},[51,133,78],{"class":68},[51,135,82],{"class":81},[51,137,93],{"class":61},[51,139,141,144,146,149,152,155,158],{"class":53,"line":140},7,[51,142,143],{"class":68},"  transform",[51,145,72],{"class":61},[51,147,148],{"class":68},"rotate",[51,150,151],{"class":61},"(",[51,153,154],{"class":68},"45",[51,156,157],{"class":81},"deg",[51,159,160],{"class":61},");\n",[51,162,164],{"class":53,"line":163},8,[51,165,99],{"class":61},[15,167,168],{},"Rotate the same shape 45° and you get a droplet or raindrop. The zero-radius corner becomes the pointed tip. Adjust the percentage to control how wide or narrow the leaf appears.",[170,171,173],"h3",{"id":172},"shape-variations","Shape Variations",[175,176,177,195],"table",{},[178,179,180],"thead",{},[181,182,183,187,189,192],"tr",{},[184,185,186],"th",{},"Shape",[184,188,21],{},[184,190,191],{},"Rotation",[184,193,194],{},"Visual",[196,197,198,215,230],"tbody",{},[181,199,200,204,209,212],{},[201,202,203],"td",{},"Leaf",[201,205,206],{},[19,207,208],{},"0 50% 50% 50%",[201,210,211],{},"none",[201,213,214],{},"Wide, organic",[181,216,217,220,224,227],{},[201,218,219],{},"Droplet",[201,221,222],{},[19,223,208],{},[201,225,226],{},"45°",[201,228,229],{},"Pointed top, round bottom",[181,231,232,235,240,242],{},[201,233,234],{},"Petal",[201,236,237],{},[19,238,239],{},"50% 0 50% 50%",[201,241,211],{},[201,243,244],{},"Point on top-right",[15,246,247],{},"Three values are enough to create distinct shapes. You rarely need all four corners at different percentages unless you want an intentional asymmetry.",[10,249,251],{"id":250},"diamond-shapes","Diamond Shapes",[15,253,254,255,257],{},"A diamond is a rotated square. The secret is zero ",[19,256,21],{}," and a 45° transform.",[42,259,261],{"className":44,"code":260,"language":46,"meta":47,"style":47},".diamond {\n  width: 100px;\n  height: 100px;\n  border-radius: 0;\n  transform: rotate(45deg);\n}\n",[19,262,263,270,285,298,308,324],{"__ignoreMap":47},[51,264,265,268],{"class":53,"line":54},[51,266,267],{"class":57},".diamond",[51,269,62],{"class":61},[51,271,272,275,277,280,283],{"class":53,"line":65},[51,273,274],{"class":68},"  width",[51,276,72],{"class":61},[51,278,279],{"class":68},"100",[51,281,282],{"class":81},"px",[51,284,93],{"class":61},[51,286,287,290,292,294,296],{"class":53,"line":96},[51,288,289],{"class":68},"  height",[51,291,72],{"class":61},[51,293,279],{"class":68},[51,295,282],{"class":81},[51,297,93],{"class":61},[51,299,300,302,304,306],{"class":53,"line":102},[51,301,69],{"class":68},[51,303,72],{"class":61},[51,305,75],{"class":68},[51,307,93],{"class":61},[51,309,310,312,314,316,318,320,322],{"class":53,"line":109},[51,311,143],{"class":68},[51,313,72],{"class":61},[51,315,148],{"class":68},[51,317,151],{"class":61},[51,319,154],{"class":68},[51,321,157],{"class":81},[51,323,160],{"class":61},[51,325,326],{"class":53,"line":117},[51,327,99],{"class":61},[15,329,330],{},"Content inside the diamond also rotates. To keep text upright, apply a counter-rotation to the inner element:",[42,332,334],{"className":44,"code":333,"language":46,"meta":47,"style":47},".diamond-content {\n  transform: rotate(-45deg);\n}\n",[19,335,336,343,360],{"__ignoreMap":47},[51,337,338,341],{"class":53,"line":54},[51,339,340],{"class":57},".diamond-content",[51,342,62],{"class":61},[51,344,345,347,349,351,353,356,358],{"class":53,"line":65},[51,346,143],{"class":68},[51,348,72],{"class":61},[51,350,148],{"class":68},[51,352,151],{"class":61},[51,354,355],{"class":68},"-45",[51,357,157],{"class":81},[51,359,160],{"class":61},[51,361,362],{"class":53,"line":96},[51,363,99],{"class":61},[15,365,366],{},"Diamonds work well as decorative accents, badge backgrounds, or navigation arrows. Keep them small — large diamonds waste considerable space in a rectangular layout.",[10,368,370],{"id":369},"image-masks-with-border-radius-and-overflow","Image Masks with Border Radius and Overflow",[15,372,373,374,376,377,380],{},"Want a circular or rounded image without an editing tool? Combine ",[19,375,21],{}," with ",[19,378,379],{},"overflow: hidden"," on the container.",[42,382,384],{"className":44,"code":383,"language":46,"meta":47,"style":47},".circle-avatar {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  overflow: hidden;\n}\n\n.circle-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n",[19,385,386,393,406,418,431,443,447,451,461,474,487,500],{"__ignoreMap":47},[51,387,388,391],{"class":53,"line":54},[51,389,390],{"class":57},".circle-avatar",[51,392,62],{"class":61},[51,394,395,397,399,402,404],{"class":53,"line":65},[51,396,274],{"class":68},[51,398,72],{"class":61},[51,400,401],{"class":68},"80",[51,403,282],{"class":81},[51,405,93],{"class":61},[51,407,408,410,412,414,416],{"class":53,"line":96},[51,409,289],{"class":68},[51,411,72],{"class":61},[51,413,401],{"class":68},[51,415,282],{"class":81},[51,417,93],{"class":61},[51,419,420,422,424,427,429],{"class":53,"line":102},[51,421,69],{"class":68},[51,423,72],{"class":61},[51,425,426],{"class":68},"50",[51,428,82],{"class":81},[51,430,93],{"class":61},[51,432,433,436,438,441],{"class":53,"line":109},[51,434,435],{"class":68},"  overflow",[51,437,72],{"class":61},[51,439,440],{"class":68},"hidden",[51,442,93],{"class":61},[51,444,445],{"class":53,"line":117},[51,446,99],{"class":61},[51,448,449],{"class":53,"line":140},[51,450,106],{"emptyLinePlaceholder":105},[51,452,453,455,459],{"class":53,"line":163},[51,454,390],{"class":57},[51,456,458],{"class":457},"s9eBZ"," img",[51,460,62],{"class":61},[51,462,464,466,468,470,472],{"class":53,"line":463},9,[51,465,274],{"class":68},[51,467,72],{"class":61},[51,469,279],{"class":68},[51,471,82],{"class":81},[51,473,93],{"class":61},[51,475,477,479,481,483,485],{"class":53,"line":476},10,[51,478,289],{"class":68},[51,480,72],{"class":61},[51,482,279],{"class":68},[51,484,82],{"class":81},[51,486,93],{"class":61},[51,488,490,493,495,498],{"class":53,"line":489},11,[51,491,492],{"class":68},"  object-fit",[51,494,72],{"class":61},[51,496,497],{"class":68},"cover",[51,499,93],{"class":61},[51,501,503],{"class":53,"line":502},12,[51,504,99],{"class":61},[170,506,508],{"id":507},"why-object-fit-matters","Why object-fit Matters",[15,510,511,512,515,516,518],{},"Without ",[19,513,514],{},"object-fit: cover",", the image stretches to fill the container — distorting faces and landscapes. With ",[19,517,497],{},", the image fills the circle and crops the excess evenly.",[175,520,521,534],{},[178,522,523],{},[181,524,525,528,531],{},[184,526,527],{},"Property",[184,529,530],{},"Without",[184,532,533],{},"With",[196,535,536,548],{},[181,537,538,542,545],{},[201,539,540],{},[19,541,514],{},[201,543,544],{},"Image stretches to fit",[201,546,547],{},"Image fills and crops",[181,549,550,554,557],{},[201,551,552],{},[19,553,379],{},[201,555,556],{},"Content bleeds past curve",[201,558,559],{},"Content clips to curve",[15,561,562],{},"Both properties together guarantee a clean, distortion-free circular image.",[170,564,566],{"id":565},"rounded-image-cards","Rounded Image Cards",[42,568,570],{"className":44,"code":569,"language":46,"meta":47,"style":47},".rounded-image-card {\n  border-radius: 16px;\n  overflow: hidden;\n}\n",[19,571,572,579,592,602],{"__ignoreMap":47},[51,573,574,577],{"class":53,"line":54},[51,575,576],{"class":57},".rounded-image-card",[51,578,62],{"class":61},[51,580,581,583,585,588,590],{"class":53,"line":65},[51,582,69],{"class":68},[51,584,72],{"class":61},[51,586,587],{"class":68},"16",[51,589,282],{"class":81},[51,591,93],{"class":61},[51,593,594,596,598,600],{"class":53,"line":96},[51,595,435],{"class":68},[51,597,72],{"class":61},[51,599,440],{"class":68},[51,601,93],{"class":61},[51,603,604],{"class":53,"line":102},[51,605,99],{"class":61},[15,607,608,609,612],{},"This clips both the background and the ",[19,610,611],{},"\u003Cimg>"," child to the same 16px rounding. No extra markup required — the container enforces the shape.",[10,614,616],{"id":615},"combining-border-radius-with-the-border-property","Combining Border Radius with the Border Property",[15,618,619],{},"Borders follow the curve. A thick border on a rounded element creates a clear, smooth outline — perfect for badges and highlighted sections.",[42,621,623],{"className":44,"code":622,"language":46,"meta":47,"style":47},".outlined-badge {\n  border-radius: 50%;\n  border: 3px solid #3B82F6;\n  width: 64px;\n  height: 64px;\n}\n\n.dashed-card {\n  border-radius: 12px;\n  border: 2px dashed #94A3B8;\n}\n",[19,624,625,632,644,664,677,689,693,697,704,717,736],{"__ignoreMap":47},[51,626,627,630],{"class":53,"line":54},[51,628,629],{"class":57},".outlined-badge",[51,631,62],{"class":61},[51,633,634,636,638,640,642],{"class":53,"line":65},[51,635,69],{"class":68},[51,637,72],{"class":61},[51,639,426],{"class":68},[51,641,82],{"class":81},[51,643,93],{"class":61},[51,645,646,649,651,654,656,659,662],{"class":53,"line":96},[51,647,648],{"class":68},"  border",[51,650,72],{"class":61},[51,652,653],{"class":68},"3",[51,655,282],{"class":81},[51,657,658],{"class":68}," solid",[51,660,661],{"class":68}," #3B82F6",[51,663,93],{"class":61},[51,665,666,668,670,673,675],{"class":53,"line":102},[51,667,274],{"class":68},[51,669,72],{"class":61},[51,671,672],{"class":68},"64",[51,674,282],{"class":81},[51,676,93],{"class":61},[51,678,679,681,683,685,687],{"class":53,"line":109},[51,680,289],{"class":68},[51,682,72],{"class":61},[51,684,672],{"class":68},[51,686,282],{"class":81},[51,688,93],{"class":61},[51,690,691],{"class":53,"line":117},[51,692,99],{"class":61},[51,694,695],{"class":53,"line":140},[51,696,106],{"emptyLinePlaceholder":105},[51,698,699,702],{"class":53,"line":163},[51,700,701],{"class":57},".dashed-card",[51,703,62],{"class":61},[51,705,706,708,710,713,715],{"class":53,"line":463},[51,707,69],{"class":68},[51,709,72],{"class":61},[51,711,712],{"class":68},"12",[51,714,282],{"class":81},[51,716,93],{"class":61},[51,718,719,721,723,726,728,731,734],{"class":53,"line":476},[51,720,648],{"class":68},[51,722,72],{"class":61},[51,724,725],{"class":68},"2",[51,727,282],{"class":81},[51,729,730],{"class":68}," dashed",[51,732,733],{"class":68}," #94A3B8",[51,735,93],{"class":61},[51,737,738],{"class":53,"line":489},[51,739,99],{"class":61},[170,741,743],{"id":742},"border-style-reference","Border Style Reference",[175,745,746,756],{},[178,747,748],{},[181,749,750,753],{},[184,751,752],{},"Style",[184,754,755],{},"Use Case",[196,757,758,768,778,788],{},[181,759,760,765],{},[201,761,762],{},[19,763,764],{},"solid",[201,766,767],{},"Clean, modern outlines",[181,769,770,775],{},[201,771,772],{},[19,773,774],{},"dashed",[201,776,777],{},"Upload zones, placeholders",[181,779,780,785],{},[201,781,782],{},[19,783,784],{},"dotted",[201,786,787],{},"Decorative dividers",[181,789,790,795],{},[201,791,792],{},[19,793,794],{},"double",[201,796,797],{},"Formal or classic looks",[15,799,800],{},"Dashed borders with rounded corners create a common \"drop zone\" pattern for file uploads. The rounded corners soften the rigid dashes, making the area feel approachable.",[170,802,804],{"id":803},"gradient-borders-with-border-radius","Gradient Borders with Border Radius",[15,806,807,808,810,811,814],{},"Standard ",[19,809,25],{}," only supports solid colors. For gradient borders, use the ",[19,812,813],{},"border-box"," technique:",[42,816,818],{"className":44,"code":817,"language":46,"meta":47,"style":47},".gradient-border {\n  border: 2px solid transparent;\n  border-radius: 16px;\n  background:\n    linear-gradient(#0F172A, #0F172A) padding-box,\n    linear-gradient(135deg, #3B82F6, #8B5CF6) border-box;\n}\n",[19,819,820,827,844,856,864,888,915],{"__ignoreMap":47},[51,821,822,825],{"class":53,"line":54},[51,823,824],{"class":57},".gradient-border",[51,826,62],{"class":61},[51,828,829,831,833,835,837,839,842],{"class":53,"line":65},[51,830,648],{"class":68},[51,832,72],{"class":61},[51,834,725],{"class":68},[51,836,282],{"class":81},[51,838,658],{"class":68},[51,840,841],{"class":68}," transparent",[51,843,93],{"class":61},[51,845,846,848,850,852,854],{"class":53,"line":96},[51,847,69],{"class":68},[51,849,72],{"class":61},[51,851,587],{"class":68},[51,853,282],{"class":81},[51,855,93],{"class":61},[51,857,858,861],{"class":53,"line":102},[51,859,860],{"class":68},"  background",[51,862,863],{"class":61},":\n",[51,865,866,869,871,874,877,879,882,885],{"class":53,"line":109},[51,867,868],{"class":68},"    linear-gradient",[51,870,151],{"class":61},[51,872,873],{"class":68},"#0F172A",[51,875,876],{"class":61},", ",[51,878,873],{"class":68},[51,880,881],{"class":61},") ",[51,883,884],{"class":68},"padding-box",[51,886,887],{"class":61},",\n",[51,889,890,892,894,897,899,901,904,906,909,911,913],{"class":53,"line":117},[51,891,868],{"class":68},[51,893,151],{"class":61},[51,895,896],{"class":68},"135",[51,898,157],{"class":81},[51,900,876],{"class":61},[51,902,903],{"class":68},"#3B82F6",[51,905,876],{"class":61},[51,907,908],{"class":68},"#8B5CF6",[51,910,881],{"class":61},[51,912,813],{"class":68},[51,914,93],{"class":61},[51,916,917],{"class":53,"line":140},[51,918,99],{"class":61},[15,920,921,922,924,925,927],{},"The ",[19,923,884],{}," layer fills the interior with a solid color. The ",[19,926,813],{}," layer paints the border area with a gradient. The transparent border creates the gap that the gradient fills.",[10,929,931],{"id":930},"css-clip-path-as-an-alternative","CSS Clip-Path as an Alternative",[15,933,934,936,937,940],{},[19,935,21],{}," only curves corners. ",[19,938,939],{},"clip-path"," cuts entire shapes — triangles, hexagons, stars — with vector precision.",[42,942,944],{"className":44,"code":943,"language":46,"meta":47,"style":47},".hexagon {\n  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n}\n\n.triangle {\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n}\n\n.star {\n  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n",[19,945,946,953,1029,1033,1037,1044,1084,1088,1092,1099,1220],{"__ignoreMap":47},[51,947,948,951],{"class":53,"line":54},[51,949,950],{"class":57},".hexagon",[51,952,62],{"class":61},[51,954,955,958,960,963,965,967,969,972,974,976,978,980,983,985,987,989,991,994,996,998,1000,1002,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027],{"class":53,"line":65},[51,956,957],{"class":68},"  clip-path",[51,959,72],{"class":61},[51,961,962],{"class":68},"polygon",[51,964,151],{"class":61},[51,966,426],{"class":68},[51,968,82],{"class":81},[51,970,971],{"class":68}," 0",[51,973,82],{"class":81},[51,975,876],{"class":61},[51,977,279],{"class":68},[51,979,82],{"class":81},[51,981,982],{"class":68}," 25",[51,984,82],{"class":81},[51,986,876],{"class":61},[51,988,279],{"class":68},[51,990,82],{"class":81},[51,992,993],{"class":68}," 75",[51,995,82],{"class":81},[51,997,876],{"class":61},[51,999,426],{"class":68},[51,1001,82],{"class":81},[51,1003,1004],{"class":68}," 100",[51,1006,82],{"class":81},[51,1008,876],{"class":61},[51,1010,75],{"class":68},[51,1012,82],{"class":81},[51,1014,993],{"class":68},[51,1016,82],{"class":81},[51,1018,876],{"class":61},[51,1020,75],{"class":68},[51,1022,82],{"class":81},[51,1024,982],{"class":68},[51,1026,82],{"class":81},[51,1028,160],{"class":61},[51,1030,1031],{"class":53,"line":96},[51,1032,99],{"class":61},[51,1034,1035],{"class":53,"line":102},[51,1036,106],{"emptyLinePlaceholder":105},[51,1038,1039,1042],{"class":53,"line":109},[51,1040,1041],{"class":57},".triangle",[51,1043,62],{"class":61},[51,1045,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082],{"class":53,"line":117},[51,1047,957],{"class":68},[51,1049,72],{"class":61},[51,1051,962],{"class":68},[51,1053,151],{"class":61},[51,1055,426],{"class":68},[51,1057,82],{"class":81},[51,1059,971],{"class":68},[51,1061,82],{"class":81},[51,1063,876],{"class":61},[51,1065,75],{"class":68},[51,1067,82],{"class":81},[51,1069,1004],{"class":68},[51,1071,82],{"class":81},[51,1073,876],{"class":61},[51,1075,279],{"class":68},[51,1077,82],{"class":81},[51,1079,1004],{"class":68},[51,1081,82],{"class":81},[51,1083,160],{"class":61},[51,1085,1086],{"class":53,"line":140},[51,1087,99],{"class":61},[51,1089,1090],{"class":53,"line":163},[51,1091,106],{"emptyLinePlaceholder":105},[51,1093,1094,1097],{"class":53,"line":463},[51,1095,1096],{"class":57},".star",[51,1098,62],{"class":61},[51,1100,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1122,1124,1127,1129,1131,1134,1136,1138,1140,1142,1145,1147,1150,1152,1154,1157,1159,1162,1164,1166,1168,1170,1173,1175,1177,1180,1182,1184,1186,1188,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1212,1214,1216,1218],{"class":53,"line":476},[51,1102,957],{"class":68},[51,1104,72],{"class":61},[51,1106,962],{"class":68},[51,1108,151],{"class":61},[51,1110,426],{"class":68},[51,1112,82],{"class":81},[51,1114,971],{"class":68},[51,1116,82],{"class":81},[51,1118,876],{"class":61},[51,1120,1121],{"class":68},"61",[51,1123,82],{"class":81},[51,1125,1126],{"class":68}," 35",[51,1128,82],{"class":81},[51,1130,876],{"class":61},[51,1132,1133],{"class":68},"98",[51,1135,82],{"class":81},[51,1137,1126],{"class":68},[51,1139,82],{"class":81},[51,1141,876],{"class":61},[51,1143,1144],{"class":68},"68",[51,1146,82],{"class":81},[51,1148,1149],{"class":68}," 57",[51,1151,82],{"class":81},[51,1153,876],{"class":61},[51,1155,1156],{"class":68},"79",[51,1158,82],{"class":81},[51,1160,1161],{"class":68}," 91",[51,1163,82],{"class":81},[51,1165,876],{"class":61},[51,1167,426],{"class":68},[51,1169,82],{"class":81},[51,1171,1172],{"class":68}," 70",[51,1174,82],{"class":81},[51,1176,876],{"class":61},[51,1178,1179],{"class":68},"21",[51,1181,82],{"class":81},[51,1183,1161],{"class":68},[51,1185,82],{"class":81},[51,1187,876],{"class":61},[51,1189,1190],{"class":68},"32",[51,1192,82],{"class":81},[51,1194,1149],{"class":68},[51,1196,82],{"class":81},[51,1198,876],{"class":61},[51,1200,725],{"class":68},[51,1202,82],{"class":81},[51,1204,1126],{"class":68},[51,1206,82],{"class":81},[51,1208,876],{"class":61},[51,1210,1211],{"class":68},"39",[51,1213,82],{"class":81},[51,1215,1126],{"class":68},[51,1217,82],{"class":81},[51,1219,160],{"class":61},[51,1221,1222],{"class":53,"line":489},[51,1223,99],{"class":61},[170,1225,1227],{"id":1226},"border-radius-vs-clip-path","Border Radius vs Clip-Path",[175,1229,1230,1241],{},[178,1231,1232],{},[181,1233,1234,1237,1239],{},[184,1235,1236],{},"Feature",[184,1238,21],{},[184,1240,939],{},[196,1242,1243,1261,1271,1286,1297,1307],{},[181,1244,1245,1248,1251],{},[201,1246,1247],{},"Curved corners",[201,1249,1250],{},"Yes",[201,1252,1253,1254,876,1257,1260],{},"Limited (",[19,1255,1256],{},"circle()",[19,1258,1259],{},"ellipse()",")",[181,1262,1263,1266,1269],{},[201,1264,1265],{},"Polygons (triangle, hexagon)",[201,1267,1268],{},"No",[201,1270,1250],{},[181,1272,1273,1276,1279],{},[201,1274,1275],{},"Transition\u002Fanimation",[201,1277,1278],{},"Smooth",[201,1280,1281,1282,1285],{},"Smooth with ",[19,1283,1284],{},"polygon()"," points",[181,1287,1288,1291,1294],{},[201,1289,1290],{},"Border support",[201,1292,1293],{},"Full",[201,1295,1296],{},"None — borders get clipped",[181,1298,1299,1302,1304],{},[201,1300,1301],{},"Box shadow support",[201,1303,1293],{},[201,1305,1306],{},"Shadow gets clipped too",[181,1308,1309,1312,1315],{},[201,1310,1311],{},"Browser support",[201,1313,1314],{},"Excellent",[201,1316,1317],{},"Good (IE11 unsupported)",[15,1319,1320,1321,1323,1324,1326,1327,1329],{},"Use ",[19,1322,21],{}," when you need borders, shadows, or curved shapes. Use ",[19,1325,939],{}," when you need geometric polygons that ",[19,1328,21],{}," cannot express.",[10,1331,1333],{"id":1332},"hybrid-approach-clip-path-and-border-radius-together","Hybrid Approach: Clip-Path and Border Radius Together",[15,1335,1336,1337,1339,1340,1342],{},"You can combine both properties. ",[19,1338,939],{}," defines the outer outline; ",[19,1341,21],{}," smooths the corners inside that outline:",[42,1344,1346],{"className":44,"code":1345,"language":46,"meta":47,"style":47},".hybrid-shape {\n  border-radius: 16px;\n  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);\n}\n",[19,1347,1348,1355,1367,1420],{"__ignoreMap":47},[51,1349,1350,1353],{"class":53,"line":54},[51,1351,1352],{"class":57},".hybrid-shape",[51,1354,62],{"class":61},[51,1356,1357,1359,1361,1363,1365],{"class":53,"line":65},[51,1358,69],{"class":68},[51,1360,72],{"class":61},[51,1362,587],{"class":68},[51,1364,282],{"class":81},[51,1366,93],{"class":61},[51,1368,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418],{"class":53,"line":96},[51,1370,957],{"class":68},[51,1372,72],{"class":61},[51,1374,962],{"class":68},[51,1376,151],{"class":61},[51,1378,75],{"class":68},[51,1380,971],{"class":68},[51,1382,876],{"class":61},[51,1384,279],{"class":68},[51,1386,82],{"class":81},[51,1388,971],{"class":68},[51,1390,876],{"class":61},[51,1392,279],{"class":68},[51,1394,82],{"class":81},[51,1396,1397],{"class":68}," 85",[51,1399,82],{"class":81},[51,1401,876],{"class":61},[51,1403,426],{"class":68},[51,1405,82],{"class":81},[51,1407,1004],{"class":68},[51,1409,82],{"class":81},[51,1411,876],{"class":61},[51,1413,75],{"class":68},[51,1415,1397],{"class":68},[51,1417,82],{"class":81},[51,1419,160],{"class":61},[51,1421,1422],{"class":53,"line":102},[51,1423,99],{"class":61},[15,1425,1426,1427,1429,1430,1432],{},"This technique works well for notification banners with angled bottoms or chat bubbles with directional tails. The ",[19,1428,939],{}," creates the angled cut; ",[19,1431,21],{}," rounds the remaining corners.",[10,1434,1436],{"id":1435},"browser-considerations","Browser Considerations",[15,1438,1439,1441],{},[19,1440,21],{}," enjoys universal support across modern browsers. No vendor prefixes needed.",[15,1443,1444,1446,1447,1449],{},[19,1445,939],{}," is well-supported in Chrome, Firefox, Safari, and Edge — but not in Internet Explorer. If you need IE11 support, provide a ",[19,1448,21],{}," fallback:",[42,1451,1453],{"className":44,"code":1452,"language":46,"meta":47,"style":47},".shape {\n  border-radius: 12px; \u002F* fallback *\u002F\n}\n\n@supports (clip-path: polygon(0 0)) {\n  .shape {\n    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n    border-radius: 0; \u002F* remove fallback rounding *\u002F\n  }\n}\n",[19,1454,1455,1462,1479,1483,1487,1510,1517,1588,1602,1607],{"__ignoreMap":47},[51,1456,1457,1460],{"class":53,"line":54},[51,1458,1459],{"class":57},".shape",[51,1461,62],{"class":61},[51,1463,1464,1466,1468,1470,1472,1475],{"class":53,"line":65},[51,1465,69],{"class":68},[51,1467,72],{"class":61},[51,1469,712],{"class":68},[51,1471,282],{"class":81},[51,1473,1474],{"class":61},"; ",[51,1476,1478],{"class":1477},"sJ8bj","\u002F* fallback *\u002F\n",[51,1480,1481],{"class":53,"line":96},[51,1482,99],{"class":61},[51,1484,1485],{"class":53,"line":102},[51,1486,106],{"emptyLinePlaceholder":105},[51,1488,1489,1492,1495,1497,1499,1501,1503,1505,1507],{"class":53,"line":109},[51,1490,1491],{"class":81},"@supports",[51,1493,1494],{"class":61}," (",[51,1496,939],{"class":68},[51,1498,72],{"class":61},[51,1500,962],{"class":68},[51,1502,151],{"class":61},[51,1504,75],{"class":68},[51,1506,971],{"class":68},[51,1508,1509],{"class":61},")) {\n",[51,1511,1512,1515],{"class":53,"line":117},[51,1513,1514],{"class":57},"  .shape",[51,1516,62],{"class":61},[51,1518,1519,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586],{"class":53,"line":140},[51,1520,1521],{"class":68},"    clip-path",[51,1523,72],{"class":61},[51,1525,962],{"class":68},[51,1527,151],{"class":61},[51,1529,426],{"class":68},[51,1531,82],{"class":81},[51,1533,971],{"class":68},[51,1535,82],{"class":81},[51,1537,876],{"class":61},[51,1539,279],{"class":68},[51,1541,82],{"class":81},[51,1543,982],{"class":68},[51,1545,82],{"class":81},[51,1547,876],{"class":61},[51,1549,279],{"class":68},[51,1551,82],{"class":81},[51,1553,993],{"class":68},[51,1555,82],{"class":81},[51,1557,876],{"class":61},[51,1559,426],{"class":68},[51,1561,82],{"class":81},[51,1563,1004],{"class":68},[51,1565,82],{"class":81},[51,1567,876],{"class":61},[51,1569,75],{"class":68},[51,1571,82],{"class":81},[51,1573,993],{"class":68},[51,1575,82],{"class":81},[51,1577,876],{"class":61},[51,1579,75],{"class":68},[51,1581,82],{"class":81},[51,1583,982],{"class":68},[51,1585,82],{"class":81},[51,1587,160],{"class":61},[51,1589,1590,1593,1595,1597,1599],{"class":53,"line":163},[51,1591,1592],{"class":68},"    border-radius",[51,1594,72],{"class":61},[51,1596,75],{"class":68},[51,1598,1474],{"class":61},[51,1600,1601],{"class":1477},"\u002F* remove fallback rounding *\u002F\n",[51,1603,1604],{"class":53,"line":463},[51,1605,1606],{"class":61},"  }\n",[51,1608,1609],{"class":53,"line":476},[51,1610,99],{"class":61},[15,1612,921,1613,1615,1616,1618],{},[19,1614,1491],{}," rule detects ",[19,1617,939],{}," support and swaps the shape only when it works.",[10,1620,1622],{"id":1621},"accessibility-reminders","Accessibility Reminders",[15,1624,1625],{},"Decorative shapes must not interfere with usability:",[1627,1628,1629,1637,1644],"ul",{},[1630,1631,1632,1633,1636],"li",{},"Add ",[19,1634,1635],{},"aria-hidden=\"true\""," to decorative blobs — screen readers should skip them",[1630,1638,1639,1640,1643],{},"Wrap shape animations in a ",[19,1641,1642],{},"prefers-reduced-motion"," query — continuous morphing can trigger vestibular issues",[1630,1645,1646],{},"Verify contrast between overlapping shapes and text at every animation frame",[42,1648,1650],{"className":44,"code":1649,"language":46,"meta":47,"style":47},"@media (prefers-reduced-motion: reduce) {\n  .animated-shape {\n    animation: none;\n  }\n}\n",[19,1651,1652,1660,1667,1678,1682],{"__ignoreMap":47},[51,1653,1654,1657],{"class":53,"line":54},[51,1655,1656],{"class":81},"@media",[51,1658,1659],{"class":61}," (prefers-reduced-motion: reduce) {\n",[51,1661,1662,1665],{"class":53,"line":65},[51,1663,1664],{"class":57},"  .animated-shape",[51,1666,62],{"class":61},[51,1668,1669,1672,1674,1676],{"class":53,"line":96},[51,1670,1671],{"class":68},"    animation",[51,1673,72],{"class":61},[51,1675,211],{"class":68},[51,1677,93],{"class":61},[51,1679,1680],{"class":53,"line":102},[51,1681,1606],{"class":61},[51,1683,1684],{"class":53,"line":109},[51,1685,99],{"class":61},[10,1687,1689],{"id":1688},"key-takeaways","Key Takeaways",[1627,1691,1692,1695,1698,1709,1718,1726,1734,1742,1754],{},[1630,1693,1694],{},"Three rounded corners + one sharp corner = leaf shape; rotate it for a droplet",[1630,1696,1697],{},"Rotate a square 45° for a diamond — counter-rotate inner text to keep it upright",[1630,1699,1700,1701,376,1703,1705,1706,1708],{},"Pair ",[19,1702,21],{},[19,1704,379],{}," and ",[19,1707,514],{}," for clean circular images",[1630,1710,1711,1712,1714,1715,1717],{},"Gradient borders require the ",[19,1713,884],{}," \u002F ",[19,1716,813],{}," background layering technique",[1630,1719,1320,1720,1722,1723,1725],{},[19,1721,939],{}," for polygons ",[19,1724,21],{}," cannot create (triangles, hexagons, stars)",[1630,1727,1728,1730,1731,1733],{},[19,1729,939],{}," clips borders and shadows — choose ",[19,1732,21],{}," when you need them",[1630,1735,1736,1737,1705,1739,1741],{},"Combine ",[19,1738,939],{},[19,1740,21],{}," for hybrid shapes with mixed edges",[1630,1743,1744,1745,1747,1748,1750,1751,1753],{},"Provide ",[19,1746,21],{}," fallbacks inside ",[19,1749,1491],{}," for ",[19,1752,939],{}," if IE11 matters",[1630,1755,1756],{},"Always add reduced-motion fallbacks for animated shapes",[10,1758,1760],{"id":1759},"try-it-yourself","Try It Yourself",[15,1762,1763,1764,1769,1770,1774],{},"Build and preview rounded corner shapes interactively with our ",[1765,1766,1768],"a",{"href":1767},"\u002Ftools\u002Fborder-radius","Border Radius Generator",". Create gradient backgrounds for your shapes using the ",[1765,1771,1773],{"href":1772},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator"," — then copy both rules into your project.",[1776,1777,1778],"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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":47,"searchDepth":65,"depth":65,"links":1780},[1781,1782,1785,1786,1790,1794,1797,1798,1799,1800,1801],{"id":12,"depth":65,"text":13},{"id":36,"depth":65,"text":37,"children":1783},[1784],{"id":172,"depth":96,"text":173},{"id":250,"depth":65,"text":251},{"id":369,"depth":65,"text":370,"children":1787},[1788,1789],{"id":507,"depth":96,"text":508},{"id":565,"depth":96,"text":566},{"id":615,"depth":65,"text":616,"children":1791},[1792,1793],{"id":742,"depth":96,"text":743},{"id":803,"depth":96,"text":804},{"id":930,"depth":65,"text":931,"children":1795},[1796],{"id":1226,"depth":96,"text":1227},{"id":1332,"depth":65,"text":1333},{"id":1435,"depth":65,"text":1436},{"id":1621,"depth":65,"text":1622},{"id":1688,"depth":65,"text":1689},{"id":1759,"depth":65,"text":1760},"2026-05-28","Create creative shapes using border-radius, borders, and CSS properties beyond simple rectangles.","md",{"immutable":105},"\u002Fguides\u002Fcss-shapes-and-borders",{"title":5,"description":1803},"guides\u002Fcss-shapes-and-borders","nitlKdK30p7gFZx37l4tBwwjZjtCoGuI0AszWAE94iU",1780401328717]