[{"data":1,"prerenderedAt":1299},["ShallowReactive",2],{"guide-css-pill-buttons-guide":3},{"id":4,"title":5,"body":6,"date":1291,"description":1292,"extension":1293,"meta":1294,"navigation":788,"path":1295,"readingTime":128,"seo":1296,"stem":1297,"__hash__":1298},"guides\u002Fguides\u002Fcss-pill-buttons-guide.md","Creating Pill Buttons with CSS",{"type":7,"value":8,"toc":1274},"minimark",[9,14,18,21,25,33,132,149,154,165,208,212,219,279,283,287,430,434,522,547,551,554,679,683,686,873,877,880,1108,1111,1198,1202,1229,1233,1254,1258,1261,1270],[10,11,13],"h2",{"id":12},"what-are-pill-buttons","What Are Pill Buttons?",[15,16,17],"p",{},"Pill buttons — also called capsule buttons — are buttons with fully rounded ends, resembling a pill or capsule shape. Instead of squared-off corners, the left and right edges form complete semicircles, creating a smooth, approachable UI element.",[15,19,20],{},"Pill buttons have become a staple of modern web design. You'll find them in navigation bars, hero sections, call-to-action areas, and tag lists. Their rounded shape signals friendliness and interaction, making them especially popular in consumer-facing products and mobile interfaces.",[10,22,24],{"id":23},"the-css-behind-pill-shapes","The CSS Behind Pill Shapes",[15,26,27,28,32],{},"Creating a pill shape is remarkably simple. The key insight: when ",[29,30,31],"code",{},"border-radius"," is set to a value equal to or greater than half the element's height, the corners form complete semicircles.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark",".pill-button {\n  padding: 12px 32px;\n  border-radius: 9999px; \u002F* or 50rem *\u002F\n  border: none;\n  cursor: pointer;\n}\n","css","",[29,41,42,55,80,100,113,126],{"__ignoreMap":39},[43,44,47,51],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk",".pill-button",[43,52,54],{"class":53},"sVt8B"," {\n",[43,56,58,62,65,68,72,75,77],{"class":45,"line":57},2,[43,59,61],{"class":60},"sj4cs","  padding",[43,63,64],{"class":53},": ",[43,66,67],{"class":60},"12",[43,69,71],{"class":70},"szBVR","px",[43,73,74],{"class":60}," 32",[43,76,71],{"class":70},[43,78,79],{"class":53},";\n",[43,81,83,86,88,91,93,96],{"class":45,"line":82},3,[43,84,85],{"class":60},"  border-radius",[43,87,64],{"class":53},[43,89,90],{"class":60},"9999",[43,92,71],{"class":70},[43,94,95],{"class":53},"; ",[43,97,99],{"class":98},"sJ8bj","\u002F* or 50rem *\u002F\n",[43,101,103,106,108,111],{"class":45,"line":102},4,[43,104,105],{"class":60},"  border",[43,107,64],{"class":53},[43,109,110],{"class":60},"none",[43,112,79],{"class":53},[43,114,116,119,121,124],{"class":45,"line":115},5,[43,117,118],{"class":60},"  cursor",[43,120,64],{"class":53},[43,122,123],{"class":60},"pointer",[43,125,79],{"class":53},[43,127,129],{"class":45,"line":128},6,[43,130,131],{"class":53},"}\n",[15,133,134,135,138,139,142,143,145,146,148],{},"Why ",[29,136,137],{},"9999px"," instead of calculating ",[29,140,141],{},"50%","? The CSS spec caps ",[29,144,31],{}," at half the element's computed dimension. So ",[29,147,137],{}," effectively means \"as round as possible\" without you needing to know the exact height. This approach is robust — it works regardless of padding, font size, or content changes.",[150,151,153],"h3",{"id":152},"tailwind-css","Tailwind CSS",[15,155,156,157,160,161,164],{},"Tailwind provides the ",[29,158,159],{},"rounded-full"," utility, which maps to ",[29,162,163],{},"border-radius: 9999px",":",[34,166,170],{"className":167,"code":168,"language":169,"meta":39,"style":39},"language-html shiki shiki-themes github-light github-dark","\u003Cbutton class=\"px-8 py-3 rounded-full bg-blue-600 text-white\">\n  Get Started\n\u003C\u002Fbutton>\n","html",[29,171,172,194,199],{"__ignoreMap":39},[43,173,174,177,181,184,187,191],{"class":45,"line":46},[43,175,176],{"class":53},"\u003C",[43,178,180],{"class":179},"s9eBZ","button",[43,182,183],{"class":49}," class",[43,185,186],{"class":53},"=",[43,188,190],{"class":189},"sZZnC","\"px-8 py-3 rounded-full bg-blue-600 text-white\"",[43,192,193],{"class":53},">\n",[43,195,196],{"class":45,"line":57},[43,197,198],{"class":53},"  Get Started\n",[43,200,201,204,206],{"class":45,"line":82},[43,202,203],{"class":53},"\u003C\u002F",[43,205,180],{"class":179},[43,207,193],{"class":53},[150,209,211],{"id":210},"the-percentage-trap","The Percentage Trap",[15,213,214,215,218],{},"A common mistake is using ",[29,216,217],{},"border-radius: 50%",". This creates an oval, not a pill — the horizontal and vertical radii scale independently based on the element's width and height. For a pill, you want the horizontal radius to be large enough to form semicircles, which percentage values handle unpredictably.",[220,221,222,238],"table",{},[223,224,225],"thead",{},[226,227,228,232,235],"tr",{},[229,230,231],"th",{},"Value",[229,233,234],{},"Shape",[229,236,237],{},"Why",[239,240,241,254,266],"tbody",{},[226,242,243,248,251],{},[244,245,246],"td",{},[29,247,137],{},[244,249,250],{},"Pill",[244,252,253],{},"Capped at half-height, always semicircular",[226,255,256,260,263],{},[244,257,258],{},[29,259,141],{},[244,261,262],{},"Oval\u002FOdd",[244,264,265],{},"Horizontal radius scales with width",[226,267,268,273,276],{},[244,269,270],{},[29,271,272],{},"100px",[244,274,275],{},"Depends",[244,277,278],{},"Only works at one specific height",[10,280,282],{"id":281},"pill-button-variations","Pill Button Variations",[150,284,286],{"id":285},"size-variants","Size Variants",[34,288,290],{"className":36,"code":289,"language":38,"meta":39,"style":39},".pill-sm  { padding: 6px 16px;  border-radius: 9999px; font-size: 0.875rem; }\n.pill-md  { padding: 10px 24px; border-radius: 9999px; font-size: 1rem; }\n.pill-lg  { padding: 14px 36px; border-radius: 9999px; font-size: 1.125rem; }\n",[29,291,292,342,386],{"__ignoreMap":39},[43,293,294,297,300,303,305,308,310,313,315,318,320,322,324,326,328,331,333,336,339],{"class":45,"line":46},[43,295,296],{"class":49},".pill-sm",[43,298,299],{"class":53},"  { ",[43,301,302],{"class":60},"padding",[43,304,64],{"class":53},[43,306,307],{"class":60},"6",[43,309,71],{"class":70},[43,311,312],{"class":60}," 16",[43,314,71],{"class":70},[43,316,317],{"class":53},";  ",[43,319,31],{"class":60},[43,321,64],{"class":53},[43,323,90],{"class":60},[43,325,71],{"class":70},[43,327,95],{"class":53},[43,329,330],{"class":60},"font-size",[43,332,64],{"class":53},[43,334,335],{"class":60},"0.875",[43,337,338],{"class":70},"rem",[43,340,341],{"class":53},"; }\n",[43,343,344,347,349,351,353,356,358,361,363,365,367,369,371,373,375,377,379,382,384],{"class":45,"line":57},[43,345,346],{"class":49},".pill-md",[43,348,299],{"class":53},[43,350,302],{"class":60},[43,352,64],{"class":53},[43,354,355],{"class":60},"10",[43,357,71],{"class":70},[43,359,360],{"class":60}," 24",[43,362,71],{"class":70},[43,364,95],{"class":53},[43,366,31],{"class":60},[43,368,64],{"class":53},[43,370,90],{"class":60},[43,372,71],{"class":70},[43,374,95],{"class":53},[43,376,330],{"class":60},[43,378,64],{"class":53},[43,380,381],{"class":60},"1",[43,383,338],{"class":70},[43,385,341],{"class":53},[43,387,388,391,393,395,397,400,402,405,407,409,411,413,415,417,419,421,423,426,428],{"class":45,"line":82},[43,389,390],{"class":49},".pill-lg",[43,392,299],{"class":53},[43,394,302],{"class":60},[43,396,64],{"class":53},[43,398,399],{"class":60},"14",[43,401,71],{"class":70},[43,403,404],{"class":60}," 36",[43,406,71],{"class":70},[43,408,95],{"class":53},[43,410,31],{"class":60},[43,412,64],{"class":53},[43,414,90],{"class":60},[43,416,71],{"class":70},[43,418,95],{"class":53},[43,420,330],{"class":60},[43,422,64],{"class":53},[43,424,425],{"class":60},"1.125",[43,427,338],{"class":70},[43,429,341],{"class":53},[150,431,433],{"id":432},"outlined-pill","Outlined Pill",[34,435,437],{"className":36,"code":436,"language":38,"meta":39,"style":39},".pill-outline {\n  padding: 10px 24px;\n  border-radius: 9999px;\n  border: 2px solid currentColor;\n  background: transparent;\n  color: #2563eb;\n}\n",[29,438,439,446,462,474,493,505,517],{"__ignoreMap":39},[43,440,441,444],{"class":45,"line":46},[43,442,443],{"class":49},".pill-outline",[43,445,54],{"class":53},[43,447,448,450,452,454,456,458,460],{"class":45,"line":57},[43,449,61],{"class":60},[43,451,64],{"class":53},[43,453,355],{"class":60},[43,455,71],{"class":70},[43,457,360],{"class":60},[43,459,71],{"class":70},[43,461,79],{"class":53},[43,463,464,466,468,470,472],{"class":45,"line":82},[43,465,85],{"class":60},[43,467,64],{"class":53},[43,469,90],{"class":60},[43,471,71],{"class":70},[43,473,79],{"class":53},[43,475,476,478,480,483,485,488,491],{"class":45,"line":102},[43,477,105],{"class":60},[43,479,64],{"class":53},[43,481,482],{"class":60},"2",[43,484,71],{"class":70},[43,486,487],{"class":60}," solid",[43,489,490],{"class":60}," currentColor",[43,492,79],{"class":53},[43,494,495,498,500,503],{"class":45,"line":115},[43,496,497],{"class":60},"  background",[43,499,64],{"class":53},[43,501,502],{"class":60},"transparent",[43,504,79],{"class":53},[43,506,507,510,512,515],{"class":45,"line":128},[43,508,509],{"class":60},"  color",[43,511,64],{"class":53},[43,513,514],{"class":60},"#2563eb",[43,516,79],{"class":53},[43,518,520],{"class":45,"line":519},7,[43,521,131],{"class":53},[34,523,525],{"className":167,"code":524,"language":169,"meta":39,"style":39},"\u003Cbutton class=\"pill-outline\">Learn More\u003C\u002Fbutton>\n",[29,526,527],{"__ignoreMap":39},[43,528,529,531,533,535,537,540,543,545],{"class":45,"line":46},[43,530,176],{"class":53},[43,532,180],{"class":179},[43,534,183],{"class":49},[43,536,186],{"class":53},[43,538,539],{"class":189},"\"pill-outline\"",[43,541,542],{"class":53},">Learn More\u003C\u002F",[43,544,180],{"class":179},[43,546,193],{"class":53},[150,548,550],{"id":549},"icon-text-pill","Icon + Text Pill",[15,552,553],{},"When adding icons, adjust the horizontal padding to keep visual balance:",[34,555,557],{"className":167,"code":556,"language":169,"meta":39,"style":39},"\u003Cbutton class=\"px-6 py-3 rounded-full bg-green-600 text-white inline-flex items-center gap-2\">\n  \u003Csvg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"\u002F>\n  \u003C\u002Fsvg>\n  Add Item\n\u003C\u002Fbutton>\n",[29,558,559,574,615,657,666,671],{"__ignoreMap":39},[43,560,561,563,565,567,569,572],{"class":45,"line":46},[43,562,176],{"class":53},[43,564,180],{"class":179},[43,566,183],{"class":49},[43,568,186],{"class":53},[43,570,571],{"class":189},"\"px-6 py-3 rounded-full bg-green-600 text-white inline-flex items-center gap-2\"",[43,573,193],{"class":53},[43,575,576,579,582,584,586,589,592,594,597,600,602,605,608,610,613],{"class":45,"line":57},[43,577,578],{"class":53},"  \u003C",[43,580,581],{"class":179},"svg",[43,583,183],{"class":49},[43,585,186],{"class":53},[43,587,588],{"class":189},"\"w-4 h-4\"",[43,590,591],{"class":49}," fill",[43,593,186],{"class":53},[43,595,596],{"class":189},"\"none\"",[43,598,599],{"class":49}," stroke",[43,601,186],{"class":53},[43,603,604],{"class":189},"\"currentColor\"",[43,606,607],{"class":49}," viewBox",[43,609,186],{"class":53},[43,611,612],{"class":189},"\"0 0 24 24\"",[43,614,193],{"class":53},[43,616,617,620,623,626,628,631,634,636,638,641,643,646,649,651,654],{"class":45,"line":82},[43,618,619],{"class":53},"    \u003C",[43,621,622],{"class":179},"path",[43,624,625],{"class":49}," stroke-linecap",[43,627,186],{"class":53},[43,629,630],{"class":189},"\"round\"",[43,632,633],{"class":49}," stroke-linejoin",[43,635,186],{"class":53},[43,637,630],{"class":189},[43,639,640],{"class":49}," stroke-width",[43,642,186],{"class":53},[43,644,645],{"class":189},"\"2\"",[43,647,648],{"class":49}," d",[43,650,186],{"class":53},[43,652,653],{"class":189},"\"M12 4v16m8-8H4\"",[43,655,656],{"class":53},"\u002F>\n",[43,658,659,662,664],{"class":45,"line":102},[43,660,661],{"class":53},"  \u003C\u002F",[43,663,581],{"class":179},[43,665,193],{"class":53},[43,667,668],{"class":45,"line":115},[43,669,670],{"class":53},"  Add Item\n",[43,672,673,675,677],{"class":45,"line":128},[43,674,203],{"class":53},[43,676,180],{"class":179},[43,678,193],{"class":53},[150,680,682],{"id":681},"pilled-tags-and-badges","Pilled Tags and Badges",[15,684,685],{},"Pill shapes work great for tags, status badges, and chip components:",[34,687,689],{"className":36,"code":688,"language":38,"meta":39,"style":39},".tag {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 12px;\n  border-radius: 9999px;\n  font-size: 0.75rem;\n  font-weight: 500;\n}\n\n.tag-blue    { background: #dbeafe; color: #1d4ed8; }\n.tag-green   { background: #dcfce7; color: #15803d; }\n.tag-red     { background: #fee2e2; color: #b91c1c; }\n",[29,690,691,698,710,722,740,752,766,778,783,790,819,846],{"__ignoreMap":39},[43,692,693,696],{"class":45,"line":46},[43,694,695],{"class":49},".tag",[43,697,54],{"class":53},[43,699,700,703,705,708],{"class":45,"line":57},[43,701,702],{"class":60},"  display",[43,704,64],{"class":53},[43,706,707],{"class":60},"inline-flex",[43,709,79],{"class":53},[43,711,712,715,717,720],{"class":45,"line":82},[43,713,714],{"class":60},"  align-items",[43,716,64],{"class":53},[43,718,719],{"class":60},"center",[43,721,79],{"class":53},[43,723,724,726,728,731,733,736,738],{"class":45,"line":102},[43,725,61],{"class":60},[43,727,64],{"class":53},[43,729,730],{"class":60},"4",[43,732,71],{"class":70},[43,734,735],{"class":60}," 12",[43,737,71],{"class":70},[43,739,79],{"class":53},[43,741,742,744,746,748,750],{"class":45,"line":115},[43,743,85],{"class":60},[43,745,64],{"class":53},[43,747,90],{"class":60},[43,749,71],{"class":70},[43,751,79],{"class":53},[43,753,754,757,759,762,764],{"class":45,"line":128},[43,755,756],{"class":60},"  font-size",[43,758,64],{"class":53},[43,760,761],{"class":60},"0.75",[43,763,338],{"class":70},[43,765,79],{"class":53},[43,767,768,771,773,776],{"class":45,"line":519},[43,769,770],{"class":60},"  font-weight",[43,772,64],{"class":53},[43,774,775],{"class":60},"500",[43,777,79],{"class":53},[43,779,781],{"class":45,"line":780},8,[43,782,131],{"class":53},[43,784,786],{"class":45,"line":785},9,[43,787,789],{"emptyLinePlaceholder":788},true,"\n",[43,791,793,796,799,802,804,807,809,812,814,817],{"class":45,"line":792},10,[43,794,795],{"class":49},".tag-blue",[43,797,798],{"class":53},"    { ",[43,800,801],{"class":60},"background",[43,803,64],{"class":53},[43,805,806],{"class":60},"#dbeafe",[43,808,95],{"class":53},[43,810,811],{"class":60},"color",[43,813,64],{"class":53},[43,815,816],{"class":60},"#1d4ed8",[43,818,341],{"class":53},[43,820,822,825,828,830,832,835,837,839,841,844],{"class":45,"line":821},11,[43,823,824],{"class":49},".tag-green",[43,826,827],{"class":53},"   { ",[43,829,801],{"class":60},[43,831,64],{"class":53},[43,833,834],{"class":60},"#dcfce7",[43,836,95],{"class":53},[43,838,811],{"class":60},[43,840,64],{"class":53},[43,842,843],{"class":60},"#15803d",[43,845,341],{"class":53},[43,847,849,852,855,857,859,862,864,866,868,871],{"class":45,"line":848},12,[43,850,851],{"class":49},".tag-red",[43,853,854],{"class":53},"     { ",[43,856,801],{"class":60},[43,858,64],{"class":53},[43,860,861],{"class":60},"#fee2e2",[43,863,95],{"class":53},[43,865,811],{"class":60},[43,867,64],{"class":53},[43,869,870],{"class":60},"#b91c1c",[43,872,341],{"class":53},[10,874,876],{"id":875},"hover-and-active-states","Hover and Active States",[15,878,879],{},"Pill buttons feel tactile — lean into that with smooth interactions:",[34,881,883],{"className":36,"code":882,"language":38,"meta":39,"style":39},".pill-button {\n  padding: 10px 24px;\n  border-radius: 9999px;\n  background: #2563eb;\n  color: white;\n  border: none;\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n}\n\n.pill-button:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\n}\n\n.pill-button:active {\n  transform: translateY(0);\n  box-shadow: none;\n}\n",[29,884,885,891,907,919,929,940,950,978,982,986,993,1014,1059,1064,1069,1077,1092,1103],{"__ignoreMap":39},[43,886,887,889],{"class":45,"line":46},[43,888,50],{"class":49},[43,890,54],{"class":53},[43,892,893,895,897,899,901,903,905],{"class":45,"line":57},[43,894,61],{"class":60},[43,896,64],{"class":53},[43,898,355],{"class":60},[43,900,71],{"class":70},[43,902,360],{"class":60},[43,904,71],{"class":70},[43,906,79],{"class":53},[43,908,909,911,913,915,917],{"class":45,"line":82},[43,910,85],{"class":60},[43,912,64],{"class":53},[43,914,90],{"class":60},[43,916,71],{"class":70},[43,918,79],{"class":53},[43,920,921,923,925,927],{"class":45,"line":102},[43,922,497],{"class":60},[43,924,64],{"class":53},[43,926,514],{"class":60},[43,928,79],{"class":53},[43,930,931,933,935,938],{"class":45,"line":115},[43,932,509],{"class":60},[43,934,64],{"class":53},[43,936,937],{"class":60},"white",[43,939,79],{"class":53},[43,941,942,944,946,948],{"class":45,"line":128},[43,943,105],{"class":60},[43,945,64],{"class":53},[43,947,110],{"class":60},[43,949,79],{"class":53},[43,951,952,955,958,961,964,967,970,972,974,976],{"class":45,"line":519},[43,953,954],{"class":60},"  transition",[43,956,957],{"class":53},": transform ",[43,959,960],{"class":60},"0.15",[43,962,963],{"class":70},"s",[43,965,966],{"class":60}," ease",[43,968,969],{"class":53},", box-shadow ",[43,971,960],{"class":60},[43,973,963],{"class":70},[43,975,966],{"class":60},[43,977,79],{"class":53},[43,979,980],{"class":45,"line":780},[43,981,131],{"class":53},[43,983,984],{"class":45,"line":785},[43,985,789],{"emptyLinePlaceholder":788},[43,987,988,991],{"class":45,"line":792},[43,989,990],{"class":49},".pill-button:hover",[43,992,54],{"class":53},[43,994,995,998,1000,1003,1006,1009,1011],{"class":45,"line":821},[43,996,997],{"class":60},"  transform",[43,999,64],{"class":53},[43,1001,1002],{"class":60},"translateY",[43,1004,1005],{"class":53},"(",[43,1007,1008],{"class":60},"-1",[43,1010,71],{"class":70},[43,1012,1013],{"class":53},");\n",[43,1015,1016,1019,1021,1024,1027,1029,1031,1033,1036,1038,1041,1044,1047,1049,1052,1054,1057],{"class":45,"line":848},[43,1017,1018],{"class":60},"  box-shadow",[43,1020,64],{"class":53},[43,1022,1023],{"class":60},"0",[43,1025,1026],{"class":60}," 4",[43,1028,71],{"class":70},[43,1030,735],{"class":60},[43,1032,71],{"class":70},[43,1034,1035],{"class":60}," rgba",[43,1037,1005],{"class":53},[43,1039,1040],{"class":60},"37",[43,1042,1043],{"class":53},", ",[43,1045,1046],{"class":60},"99",[43,1048,1043],{"class":53},[43,1050,1051],{"class":60},"235",[43,1053,1043],{"class":53},[43,1055,1056],{"class":60},"0.3",[43,1058,1013],{"class":53},[43,1060,1062],{"class":45,"line":1061},13,[43,1063,131],{"class":53},[43,1065,1067],{"class":45,"line":1066},14,[43,1068,789],{"emptyLinePlaceholder":788},[43,1070,1072,1075],{"class":45,"line":1071},15,[43,1073,1074],{"class":49},".pill-button:active",[43,1076,54],{"class":53},[43,1078,1080,1082,1084,1086,1088,1090],{"class":45,"line":1079},16,[43,1081,997],{"class":60},[43,1083,64],{"class":53},[43,1085,1002],{"class":60},[43,1087,1005],{"class":53},[43,1089,1023],{"class":60},[43,1091,1013],{"class":53},[43,1093,1095,1097,1099,1101],{"class":45,"line":1094},17,[43,1096,1018],{"class":60},[43,1098,64],{"class":53},[43,1100,110],{"class":60},[43,1102,79],{"class":53},[43,1104,1106],{"class":45,"line":1105},18,[43,1107,131],{"class":53},[15,1109,1110],{},"For dark mode, adjust the hover shadow and background:",[34,1112,1114],{"className":36,"code":1113,"language":38,"meta":39,"style":39},".dark .pill-button {\n  background: #3b82f6;\n}\n\n.dark .pill-button:hover {\n  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);\n}\n",[29,1115,1116,1126,1137,1141,1145,1154,1194],{"__ignoreMap":39},[43,1117,1118,1121,1124],{"class":45,"line":46},[43,1119,1120],{"class":49},".dark",[43,1122,1123],{"class":49}," .pill-button",[43,1125,54],{"class":53},[43,1127,1128,1130,1132,1135],{"class":45,"line":57},[43,1129,497],{"class":60},[43,1131,64],{"class":53},[43,1133,1134],{"class":60},"#3b82f6",[43,1136,79],{"class":53},[43,1138,1139],{"class":45,"line":82},[43,1140,131],{"class":53},[43,1142,1143],{"class":45,"line":102},[43,1144,789],{"emptyLinePlaceholder":788},[43,1146,1147,1149,1152],{"class":45,"line":115},[43,1148,1120],{"class":49},[43,1150,1151],{"class":49}," .pill-button:hover",[43,1153,54],{"class":53},[43,1155,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1177,1179,1182,1184,1187,1189,1192],{"class":45,"line":128},[43,1157,1018],{"class":60},[43,1159,64],{"class":53},[43,1161,1023],{"class":60},[43,1163,1026],{"class":60},[43,1165,71],{"class":70},[43,1167,735],{"class":60},[43,1169,71],{"class":70},[43,1171,1035],{"class":60},[43,1173,1005],{"class":53},[43,1175,1176],{"class":60},"59",[43,1178,1043],{"class":53},[43,1180,1181],{"class":60},"130",[43,1183,1043],{"class":53},[43,1185,1186],{"class":60},"246",[43,1188,1043],{"class":53},[43,1190,1191],{"class":60},"0.25",[43,1193,1013],{"class":53},[43,1195,1196],{"class":45,"line":519},[43,1197,131],{"class":53},[10,1199,1201],{"id":1200},"common-pitfalls","Common Pitfalls",[1203,1204,1205,1213,1219],"ul",{},[1206,1207,1208,1212],"li",{},[1209,1210,1211],"strong",{},"Text too short",": A pill button with very short text (like \"OK\") looks like a circle, not a pill. Ensure horizontal padding is generous enough to maintain the capsule shape.",[1206,1214,1215,1218],{},[1209,1216,1217],{},"Inconsistent sizing",": When pill buttons sit next to regular buttons, their height must match visually. Adjust padding until the content area heights align.",[1206,1220,1221,1224,1225,1228],{},[1209,1222,1223],{},"Wrapping text",": Pill buttons with multi-line text break the capsule shape. Use ",[29,1226,1227],{},"white-space: nowrap"," to prevent wrapping.",[10,1230,1232],{"id":1231},"related-guides","Related Guides",[1203,1234,1235,1242,1248],{},[1206,1236,1237],{},[1238,1239,1241],"a",{"href":1240},"\u002Fguides\u002Fborder-radius-guide","Border Radius Guide",[1206,1243,1244],{},[1238,1245,1247],{"href":1246},"\u002Fguides\u002Fcss-rounded-corners-tutorial","CSS Rounded Corners Tutorial",[1206,1249,1250],{},[1238,1251,1253],{"href":1252},"\u002Fguides\u002Fcss-shapes-and-borders","CSS Shapes and Borders",[10,1255,1257],{"id":1256},"try-it-yourself","Try It Yourself",[15,1259,1260],{},"Design pill buttons interactively — adjust border-radius, padding, colors, and hover effects with our visual border-radius tool.",[15,1262,1263,1264],{},"👉 ",[1238,1265,1267],{"href":1266},"\u002Ftools\u002Fborder-radius",[1209,1268,1269],{},"Border Radius Generator",[1271,1272,1273],"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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":39,"searchDepth":57,"depth":57,"links":1275},[1276,1277,1281,1287,1288,1289,1290],{"id":12,"depth":57,"text":13},{"id":23,"depth":57,"text":24,"children":1278},[1279,1280],{"id":152,"depth":82,"text":153},{"id":210,"depth":82,"text":211},{"id":281,"depth":57,"text":282,"children":1282},[1283,1284,1285,1286],{"id":285,"depth":82,"text":286},{"id":432,"depth":82,"text":433},{"id":549,"depth":82,"text":550},{"id":681,"depth":82,"text":682},{"id":875,"depth":57,"text":876},{"id":1200,"depth":57,"text":1201},{"id":1231,"depth":57,"text":1232},{"id":1256,"depth":57,"text":1257},"2026-05-28","How to use border-radius to create fully-rounded pill buttons and capsules in CSS.","md",{"immutable":788},"\u002Fguides\u002Fcss-pill-buttons-guide",{"title":5,"description":1292},"guides\u002Fcss-pill-buttons-guide","bNW-BCF0SFp3dCYoBpO-xDevyeMg2PRJDOPj6kAT9gU",1780401333046]