[{"data":1,"prerenderedAt":1221},["ShallowReactive",2],{"page-\u002Fcss\u002F12-borders-shadows-and-outlines":3},{"id":4,"title":5,"body":6,"description":1214,"extension":1215,"meta":1216,"navigation":271,"path":1217,"seo":1218,"stem":1219,"__hash__":1220},"content\u002Fcss\u002F12-borders-shadows-and-outlines.md","12 — Borders, Shadows, Outlines & Focus States",{"type":7,"value":8,"toc":1201},"minimark",[9,13,33,38,201,205,501,506,581,758,766,843,847,907,977,981,1028,1032,1112,1116,1163,1197],[10,11,5],"h1",{"id":12},"_12-borders-shadows-outlines-focus-states",[14,15,16,17,21,22,25,26,29,30,32],"p",{},"Borders and shadows are visual styling; outlines are for focus states. The key distinction: ",[18,19,20],"code",{},"border"," affects layout (takes space); ",[18,23,24],{},"outline"," and ",[18,27,28],{},"box-shadow"," don't. That's why focus rings use ",[18,31,24],{}," — no layout shift when focus appears.",[34,35,37],"h2",{"id":36},"borders","Borders",[39,40,42],"code-wrapper",{"language":41},"css",[43,44,48],"pre",{"className":45,"code":46,"language":41,"meta":47,"style":47},"language-css shiki shiki-themes github-light github-dark",".box {\n  border: 2px solid #333;           \u002F* shorthand: width style color. style is REQUIRED (default none = no border) *\u002F\n  border-radius: 8px;               \u002F* all corners *\u002F\n  border-radius: 10px 20px 30px 40px; \u002F* TL TR BR BL (clockwise from top) *\u002F\n  border-radius: 50%;              \u002F* circle on a square; ellipse on a rectangle *\u002F\n  border-radius: 10px \u002F 20px;     \u002F* elliptical: horizontal \u002F vertical radii *\u002F\n}\n\u002F* border-style: none (default) → border-width alone does NOTHING. Always set a style. *\u002F\n","",[18,49,50,63,93,112,145,164,189,195],{"__ignoreMap":47},[51,52,55,59],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sIsaT",".box",[51,60,62],{"class":61},"ssxIu"," {\n",[51,64,66,70,73,76,80,83,86,89],{"class":53,"line":65},2,[51,67,69],{"class":68},"snvgF","  border",[51,71,72],{"class":61},": ",[51,74,75],{"class":68},"2",[51,77,79],{"class":78},"svdQ7","px",[51,81,82],{"class":68}," solid",[51,84,85],{"class":68}," #333",[51,87,88],{"class":61},";           ",[51,90,92],{"class":91},"sdCPZ","\u002F* shorthand: width style color. style is REQUIRED (default none = no border) *\u002F\n",[51,94,96,99,101,104,106,109],{"class":53,"line":95},3,[51,97,98],{"class":68},"  border-radius",[51,100,72],{"class":61},[51,102,103],{"class":68},"8",[51,105,79],{"class":78},[51,107,108],{"class":61},";               ",[51,110,111],{"class":91},"\u002F* all corners *\u002F\n",[51,113,115,117,119,122,124,127,129,132,134,137,139,142],{"class":53,"line":114},4,[51,116,98],{"class":68},[51,118,72],{"class":61},[51,120,121],{"class":68},"10",[51,123,79],{"class":78},[51,125,126],{"class":68}," 20",[51,128,79],{"class":78},[51,130,131],{"class":68}," 30",[51,133,79],{"class":78},[51,135,136],{"class":68}," 40",[51,138,79],{"class":78},[51,140,141],{"class":61},"; ",[51,143,144],{"class":91},"\u002F* TL TR BR BL (clockwise from top) *\u002F\n",[51,146,148,150,152,155,158,161],{"class":53,"line":147},5,[51,149,98],{"class":68},[51,151,72],{"class":61},[51,153,154],{"class":68},"50",[51,156,157],{"class":78},"%",[51,159,160],{"class":61},";              ",[51,162,163],{"class":91},"\u002F* circle on a square; ellipse on a rectangle *\u002F\n",[51,165,167,169,171,173,175,178,181,183,186],{"class":53,"line":166},6,[51,168,98],{"class":68},[51,170,72],{"class":61},[51,172,121],{"class":68},[51,174,79],{"class":78},[51,176,177],{"class":61}," \u002F ",[51,179,180],{"class":68},"20",[51,182,79],{"class":78},[51,184,185],{"class":61},";     ",[51,187,188],{"class":91},"\u002F* elliptical: horizontal \u002F vertical radii *\u002F\n",[51,190,192],{"class":53,"line":191},7,[51,193,194],{"class":61},"}\n",[51,196,198],{"class":53,"line":197},8,[51,199,200],{"class":91},"\u002F* border-style: none (default) → border-width alone does NOTHING. Always set a style. *\u002F\n",[34,202,204],{"id":203},"box-shadows-layered-elevation","Box Shadows — layered elevation",[39,206,207],{"language":41},[43,208,210],{"className":45,"code":209,"language":41,"meta":47,"style":47},"\u002F* box-shadow: offset-x offset-y blur spread color [inset]. Doesn't affect layout (painted outside). *\u002F\n.card { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }\n\n\u002F* Material Design elevation: ambient (tight, close) + key (diffuse, far) = realistic depth. *\u002F\n.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }\n.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }\n.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); }\n",[18,211,212,217,267,273,278,355,428],{"__ignoreMap":47},[51,213,214],{"class":53,"line":54},[51,215,216],{"class":91},"\u002F* box-shadow: offset-x offset-y blur spread color [inset]. Doesn't affect layout (painted outside). *\u002F\n",[51,218,219,222,225,227,229,232,235,237,240,242,245,248,250,253,255,257,259,261,264],{"class":53,"line":65},[51,220,221],{"class":57},".card",[51,223,224],{"class":61}," { ",[51,226,28],{"class":68},[51,228,72],{"class":61},[51,230,231],{"class":68},"0",[51,233,234],{"class":68}," 4",[51,236,79],{"class":78},[51,238,239],{"class":68}," 6",[51,241,79],{"class":78},[51,243,244],{"class":68}," rgba",[51,246,247],{"class":61},"(",[51,249,231],{"class":68},[51,251,252],{"class":61},",",[51,254,231],{"class":68},[51,256,252],{"class":61},[51,258,231],{"class":68},[51,260,252],{"class":61},[51,262,263],{"class":68},"0.1",[51,265,266],{"class":61},"); }\n",[51,268,269],{"class":53,"line":95},[51,270,272],{"emptyLinePlaceholder":271},true,"\n",[51,274,275],{"class":53,"line":114},[51,276,277],{"class":91},"\u002F* Material Design elevation: ambient (tight, close) + key (diffuse, far) = realistic depth. *\u002F\n",[51,279,280,283,285,287,289,291,294,296,299,301,303,305,307,309,311,313,315,317,320,323,325,327,329,332,334,336,338,340,342,344,346,348,350,353],{"class":53,"line":147},[51,281,282],{"class":57},".elevation-1",[51,284,224],{"class":61},[51,286,28],{"class":68},[51,288,72],{"class":61},[51,290,231],{"class":68},[51,292,293],{"class":68}," 1",[51,295,79],{"class":78},[51,297,298],{"class":68}," 3",[51,300,79],{"class":78},[51,302,244],{"class":68},[51,304,247],{"class":61},[51,306,231],{"class":68},[51,308,252],{"class":61},[51,310,231],{"class":68},[51,312,252],{"class":61},[51,314,231],{"class":68},[51,316,252],{"class":61},[51,318,319],{"class":68},"0.12",[51,321,322],{"class":61},"), ",[51,324,231],{"class":68},[51,326,293],{"class":68},[51,328,79],{"class":78},[51,330,331],{"class":68}," 2",[51,333,79],{"class":78},[51,335,244],{"class":68},[51,337,247],{"class":61},[51,339,231],{"class":68},[51,341,252],{"class":61},[51,343,231],{"class":68},[51,345,252],{"class":61},[51,347,231],{"class":68},[51,349,252],{"class":61},[51,351,352],{"class":68},"0.24",[51,354,266],{"class":61},[51,356,357,360,362,364,366,368,370,372,374,376,378,380,382,384,386,388,390,392,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,426],{"class":53,"line":166},[51,358,359],{"class":57},".elevation-2",[51,361,224],{"class":61},[51,363,28],{"class":68},[51,365,72],{"class":61},[51,367,231],{"class":68},[51,369,298],{"class":68},[51,371,79],{"class":78},[51,373,239],{"class":68},[51,375,79],{"class":78},[51,377,244],{"class":68},[51,379,247],{"class":61},[51,381,231],{"class":68},[51,383,252],{"class":61},[51,385,231],{"class":68},[51,387,252],{"class":61},[51,389,231],{"class":68},[51,391,252],{"class":61},[51,393,394],{"class":68},"0.16",[51,396,322],{"class":61},[51,398,231],{"class":68},[51,400,298],{"class":68},[51,402,79],{"class":78},[51,404,239],{"class":68},[51,406,79],{"class":78},[51,408,244],{"class":68},[51,410,247],{"class":61},[51,412,231],{"class":68},[51,414,252],{"class":61},[51,416,231],{"class":68},[51,418,252],{"class":61},[51,420,231],{"class":68},[51,422,252],{"class":61},[51,424,425],{"class":68},"0.23",[51,427,266],{"class":61},[51,429,430,433,435,437,439,441,444,446,448,450,452,454,456,458,460,462,464,466,469,471,473,475,477,479,481,483,485,487,489,491,493,495,497,499],{"class":53,"line":191},[51,431,432],{"class":57},".elevation-3",[51,434,224],{"class":61},[51,436,28],{"class":68},[51,438,72],{"class":61},[51,440,231],{"class":68},[51,442,443],{"class":68}," 10",[51,445,79],{"class":78},[51,447,126],{"class":68},[51,449,79],{"class":78},[51,451,244],{"class":68},[51,453,247],{"class":61},[51,455,231],{"class":68},[51,457,252],{"class":61},[51,459,231],{"class":68},[51,461,252],{"class":61},[51,463,231],{"class":68},[51,465,252],{"class":61},[51,467,468],{"class":68},"0.19",[51,470,322],{"class":61},[51,472,231],{"class":68},[51,474,239],{"class":68},[51,476,79],{"class":78},[51,478,239],{"class":68},[51,480,79],{"class":78},[51,482,244],{"class":68},[51,484,247],{"class":61},[51,486,231],{"class":68},[51,488,252],{"class":61},[51,490,231],{"class":68},[51,492,252],{"class":61},[51,494,231],{"class":68},[51,496,252],{"class":61},[51,498,425],{"class":68},[51,500,266],{"class":61},[502,503,505],"h3",{"id":504},"anti-pattern-animating-box-shadow-directly-janky","Anti-pattern: animating box-shadow directly (janky)",[39,507,508],{"language":41},[43,509,511],{"className":45,"code":510,"language":41,"meta":47,"style":47},"\u002F* ❌ Animating box-shadow repaints the shadow EVERY frame → expensive, drops frames. *\u002F\n.card { transition: box-shadow 0.3s; }\n.card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\n",[18,512,513,518,539],{"__ignoreMap":47},[51,514,515],{"class":53,"line":54},[51,516,517],{"class":91},"\u002F* ❌ Animating box-shadow repaints the shadow EVERY frame → expensive, drops frames. *\u002F\n",[51,519,520,522,524,527,530,533,536],{"class":53,"line":65},[51,521,221],{"class":57},[51,523,224],{"class":61},[51,525,526],{"class":68},"transition",[51,528,529],{"class":61},": box-shadow ",[51,531,532],{"class":68},"0.3",[51,534,535],{"class":78},"s",[51,537,538],{"class":61},"; }\n",[51,540,541,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576,579],{"class":53,"line":95},[51,542,543],{"class":57},".card:hover",[51,545,224],{"class":61},[51,547,28],{"class":68},[51,549,72],{"class":61},[51,551,231],{"class":68},[51,553,443],{"class":68},[51,555,79],{"class":78},[51,557,131],{"class":68},[51,559,79],{"class":78},[51,561,244],{"class":68},[51,563,247],{"class":61},[51,565,231],{"class":68},[51,567,252],{"class":61},[51,569,231],{"class":68},[51,571,252],{"class":61},[51,573,231],{"class":68},[51,575,252],{"class":61},[51,577,578],{"class":68},"0.2",[51,580,266],{"class":61},[39,582,583],{"language":41},[43,584,586],{"className":45,"code":585,"language":41,"meta":47,"style":47},"\u002F* ✓ Animate a pseudo-element's opacity (the hover shadow is always painted, just transparent).\n   opacity is compositor-only (GPU) → 60fps. *\u002F\n.card { position: relative; }\n.card::after {\n  content: \"\"; position: absolute; inset: 0; border-radius: inherit;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n  opacity: 0; transition: opacity 0.3s;\n  z-index: -1;\n}\n.card:hover::after { opacity: 1; }\n",[18,587,588,593,598,614,621,663,701,723,735,740],{"__ignoreMap":47},[51,589,590],{"class":53,"line":54},[51,591,592],{"class":91},"\u002F* ✓ Animate a pseudo-element's opacity (the hover shadow is always painted, just transparent).\n",[51,594,595],{"class":53,"line":65},[51,596,597],{"class":91},"   opacity is compositor-only (GPU) → 60fps. *\u002F\n",[51,599,600,602,604,607,609,612],{"class":53,"line":95},[51,601,221],{"class":57},[51,603,224],{"class":61},[51,605,606],{"class":68},"position",[51,608,72],{"class":61},[51,610,611],{"class":68},"relative",[51,613,538],{"class":61},[51,615,616,619],{"class":53,"line":114},[51,617,618],{"class":57},".card::after",[51,620,62],{"class":61},[51,622,623,626,628,632,634,636,638,641,643,646,648,650,652,655,657,660],{"class":53,"line":147},[51,624,625],{"class":68},"  content",[51,627,72],{"class":61},[51,629,631],{"class":630},"sJ6F3","\"\"",[51,633,141],{"class":61},[51,635,606],{"class":68},[51,637,72],{"class":61},[51,639,640],{"class":68},"absolute",[51,642,141],{"class":61},[51,644,645],{"class":68},"inset",[51,647,72],{"class":61},[51,649,231],{"class":68},[51,651,141],{"class":61},[51,653,654],{"class":68},"border-radius",[51,656,72],{"class":61},[51,658,659],{"class":68},"inherit",[51,661,662],{"class":61},";\n",[51,664,665,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698],{"class":53,"line":166},[51,666,667],{"class":68},"  box-shadow",[51,669,72],{"class":61},[51,671,231],{"class":68},[51,673,443],{"class":68},[51,675,79],{"class":78},[51,677,131],{"class":68},[51,679,79],{"class":78},[51,681,244],{"class":68},[51,683,247],{"class":61},[51,685,231],{"class":68},[51,687,252],{"class":61},[51,689,231],{"class":68},[51,691,252],{"class":61},[51,693,231],{"class":68},[51,695,252],{"class":61},[51,697,578],{"class":68},[51,699,700],{"class":61},");\n",[51,702,703,706,708,710,712,714,717,719,721],{"class":53,"line":191},[51,704,705],{"class":68},"  opacity",[51,707,72],{"class":61},[51,709,231],{"class":68},[51,711,141],{"class":61},[51,713,526],{"class":68},[51,715,716],{"class":61},": opacity ",[51,718,532],{"class":68},[51,720,535],{"class":78},[51,722,662],{"class":61},[51,724,725,728,730,733],{"class":53,"line":197},[51,726,727],{"class":68},"  z-index",[51,729,72],{"class":61},[51,731,732],{"class":68},"-1",[51,734,662],{"class":61},[51,736,738],{"class":53,"line":737},9,[51,739,194],{"class":61},[51,741,743,746,748,751,753,756],{"class":53,"line":742},10,[51,744,745],{"class":57},".card:hover::after",[51,747,224],{"class":61},[51,749,750],{"class":68},"opacity",[51,752,72],{"class":61},[51,754,755],{"class":68},"1",[51,757,538],{"class":61},[34,759,761,762,765],{"id":760},"outlines-focus-visible-the-accessible-focus-ring","Outlines & ",[18,763,764],{},":focus-visible"," — the accessible focus ring",[39,767,768],{"language":41},[43,769,771],{"className":45,"code":770,"language":41,"meta":47,"style":47},"\u002F* outline: like border but DOESN'T affect layout (no shift). Always on all 4 sides (no per-side). *\u002F\n\u002F* :focus-visible = keyboard focus only (not mouse click). The correct focus-ring pseudo-class. *\u002F\nbutton:focus-visible {\n  outline: 2px solid var(--c-primary);\n  outline-offset: 2px;   \u002F* gap between the element and the outline *\u002F\n}\n\u002F* ⚠️ outline is NOT clipped by overflow:hidden the same way box-shadow is → safer for focus rings. *\u002F\n",[18,772,773,778,783,793,817,834,838],{"__ignoreMap":47},[51,774,775],{"class":53,"line":54},[51,776,777],{"class":91},"\u002F* outline: like border but DOESN'T affect layout (no shift). Always on all 4 sides (no per-side). *\u002F\n",[51,779,780],{"class":53,"line":65},[51,781,782],{"class":91},"\u002F* :focus-visible = keyboard focus only (not mouse click). The correct focus-ring pseudo-class. *\u002F\n",[51,784,785,789,791],{"class":53,"line":95},[51,786,788],{"class":787},"sk71V","button",[51,790,764],{"class":57},[51,792,62],{"class":61},[51,794,795,798,800,802,804,806,809,811,815],{"class":53,"line":114},[51,796,797],{"class":68},"  outline",[51,799,72],{"class":61},[51,801,75],{"class":68},[51,803,79],{"class":78},[51,805,82],{"class":68},[51,807,808],{"class":68}," var",[51,810,247],{"class":61},[51,812,814],{"class":813},"sCrzJ","--c-primary",[51,816,700],{"class":61},[51,818,819,822,824,826,828,831],{"class":53,"line":147},[51,820,821],{"class":68},"  outline-offset",[51,823,72],{"class":61},[51,825,75],{"class":68},[51,827,79],{"class":78},[51,829,830],{"class":61},";   ",[51,832,833],{"class":91},"\u002F* gap between the element and the outline *\u002F\n",[51,835,836],{"class":53,"line":166},[51,837,194],{"class":61},[51,839,840],{"class":53,"line":191},[51,841,842],{"class":91},"\u002F* ⚠️ outline is NOT clipped by overflow:hidden the same way box-shadow is → safer for focus rings. *\u002F\n",[502,844,846],{"id":845},"anti-pattern-removing-outline-without-a-replacement","Anti-pattern: removing outline without a replacement",[39,848,849],{"language":41},[43,850,852],{"className":45,"code":851,"language":41,"meta":47,"style":47},"\u002F* ❌ Removing outline without a replacement = accessibility violation. Keyboard users lose focus indicator. *\u002F\nbutton { outline: none; }\nbutton:focus { box-shadow: 0 0 0 2px blue; }  \u002F* :focus shows on mouse click too + clipped by overflow:hidden *\u002F\n",[18,853,854,859,874],{"__ignoreMap":47},[51,855,856],{"class":53,"line":54},[51,857,858],{"class":91},"\u002F* ❌ Removing outline without a replacement = accessibility violation. Keyboard users lose focus indicator. *\u002F\n",[51,860,861,863,865,867,869,872],{"class":53,"line":65},[51,862,788],{"class":787},[51,864,224],{"class":61},[51,866,24],{"class":68},[51,868,72],{"class":61},[51,870,871],{"class":68},"none",[51,873,538],{"class":61},[51,875,876,878,881,883,885,887,889,892,894,896,898,901,904],{"class":53,"line":95},[51,877,788],{"class":787},[51,879,880],{"class":57},":focus",[51,882,224],{"class":61},[51,884,28],{"class":68},[51,886,72],{"class":61},[51,888,231],{"class":68},[51,890,891],{"class":68}," 0",[51,893,891],{"class":68},[51,895,331],{"class":68},[51,897,79],{"class":78},[51,899,900],{"class":68}," blue",[51,902,903],{"class":61},"; }  ",[51,905,906],{"class":91},"\u002F* :focus shows on mouse click too + clipped by overflow:hidden *\u002F\n",[39,908,909],{"language":41},[43,910,912],{"className":45,"code":911,"language":41,"meta":47,"style":47},"\u002F* ✓ Use :focus-visible (keyboard only) + outline (not clipped by overflow ancestors). *\u002F\nbutton { outline: none; }  \u002F* remove default *\u002F\nbutton:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }  \u002F* keyboard only *\u002F\n",[18,913,914,919,936],{"__ignoreMap":47},[51,915,916],{"class":53,"line":54},[51,917,918],{"class":91},"\u002F* ✓ Use :focus-visible (keyboard only) + outline (not clipped by overflow ancestors). *\u002F\n",[51,920,921,923,925,927,929,931,933],{"class":53,"line":65},[51,922,788],{"class":787},[51,924,224],{"class":61},[51,926,24],{"class":68},[51,928,72],{"class":61},[51,930,871],{"class":68},[51,932,903],{"class":61},[51,934,935],{"class":91},"\u002F* remove default *\u002F\n",[51,937,938,940,942,944,946,948,950,952,954,956,958,960,963,966,968,970,972,974],{"class":53,"line":95},[51,939,788],{"class":787},[51,941,764],{"class":57},[51,943,224],{"class":61},[51,945,24],{"class":68},[51,947,72],{"class":61},[51,949,75],{"class":68},[51,951,79],{"class":78},[51,953,82],{"class":68},[51,955,808],{"class":68},[51,957,247],{"class":61},[51,959,814],{"class":813},[51,961,962],{"class":61},"); ",[51,964,965],{"class":68},"outline-offset",[51,967,72],{"class":61},[51,969,75],{"class":68},[51,971,79],{"class":78},[51,973,903],{"class":61},[51,975,976],{"class":91},"\u002F* keyboard only *\u002F\n",[34,978,980],{"id":979},"tips-tricks","💡 Tips & Tricks",[982,983,984,1003,1008,1020],"ul",{},[985,986,987,72,991,993,994,996,997,999,1000,1002],"li",{},[988,989,990],"strong",{},"Idiom",[18,992,764],{}," (not ",[18,995,880],{},") for focus rings — shows only for keyboard navigation, not mouse click. Pair with ",[18,998,965],{}," for a gap. Never remove ",[18,1001,24],{}," without a visible replacement.",[985,1004,1005,1007],{},[988,1006,990],{},": layered box-shadows (ambient + key) for realistic elevation — a single flat shadow looks amateurish. Material Design's two-shadow pattern is the standard.",[985,1009,1010,72,1012,1015,1016,1019],{},[988,1011,990],{},[18,1013,1014],{},"border-radius: 50%"," on a square = circle (avatars, badges) — no SVG needed. On a rectangle, it's an ellipse; use ",[18,1017,1018],{},"aspect-ratio: 1"," for a guaranteed square.",[985,1021,1022,1024,1025,1027],{},[988,1023,990],{},": animate a pseudo-element's opacity for shadow transitions — ",[18,1026,28],{}," animation repaints each frame; opacity is compositor-only (GPU, 60fps).",[34,1029,1031],{"id":1030},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[982,1033,1034,1050,1066,1079,1098],{},[985,1035,1036,72,1042,1045,1046,1049],{},[988,1037,1038,1041],{},[18,1039,1040],{},"border-style: none"," (default) means no border",[18,1043,1044],{},"border-width: 2px"," alone does nothing. Always set a style (",[18,1047,1048],{},"solid"," etc.).",[985,1051,1052,1061,1062,1065],{},[988,1053,1054,1056,1057,1060],{},[18,1055,28],{}," is clipped by ",[18,1058,1059],{},"overflow: hidden"," ancestors",": a child's shadow extending outside is cut. Use ",[18,1063,1064],{},"overflow: clip"," (no scroll container) or restructure.",[985,1067,1068,1075,1076,1078],{},[988,1069,1070,1072,1073],{},[18,1071,24],{}," doesn't follow ",[18,1074,654],{}," in most browsers: the outline is rectangular even on a rounded box. Use ",[18,1077,28],{}," as a focus indicator if you need rounded focus rings.",[985,1080,1081,1093,1094,1097],{},[988,1082,1083,1086,1087,1089,1090],{},[18,1084,1085],{},"text-shadow"," has no ",[18,1088,645],{}," or ",[18,1091,1092],{},"spread",": only ",[18,1095,1096],{},"offset-x offset-y blur color",". Multiple shadows (comma) create 3D\u002Fglow effects.",[985,1099,1100,1105,1106,1089,1109,1111],{},[988,1101,1102,1104],{},[18,1103,1014],{}," on a non-square = ellipse",": for a circle, the element must be square (",[18,1107,1108],{},"width === height",[18,1110,1018],{},").",[34,1113,1115],{"id":1114},"spot-the-bug","🧠 Spot the Bug",[39,1117,1118],{"language":41},[43,1119,1121],{"className":45,"code":1120,"language":41,"meta":47,"style":47},"button { outline: none; }\nbutton:focus { box-shadow: 0 0 0 2px blue; }\n",[18,1122,1123,1137],{"__ignoreMap":47},[51,1124,1125,1127,1129,1131,1133,1135],{"class":53,"line":54},[51,1126,788],{"class":787},[51,1128,224],{"class":61},[51,1130,24],{"class":68},[51,1132,72],{"class":61},[51,1134,871],{"class":68},[51,1136,538],{"class":61},[51,1138,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1159,1161],{"class":53,"line":65},[51,1140,788],{"class":787},[51,1142,880],{"class":57},[51,1144,224],{"class":61},[51,1146,28],{"class":68},[51,1148,72],{"class":61},[51,1150,231],{"class":68},[51,1152,891],{"class":68},[51,1154,891],{"class":68},[51,1156,331],{"class":68},[51,1158,79],{"class":78},[51,1160,900],{"class":68},[51,1162,538],{"class":61},[1164,1165,1166,1170],"details",{},[1167,1168,1169],"summary",{},"Answer",[14,1171,1172,1173,1175,1176,1178,1179,1056,1181,1183,1184,1186,1187,1189,1190,1193,1194,1196],{},"Two issues: (1) ",[18,1174,880],{}," matches both keyboard and mouse click → the ring appears after clicking with a mouse (unwanted). Use ",[18,1177,764],{}," for keyboard-only. (2) ",[18,1180,28],{},[18,1182,1059],{}," ancestors — if the button is inside a clipping container, the 2px ring is invisible to keyboard users. ",[18,1185,24],{}," (+ ",[18,1188,965],{},") isn't clipped the same way. Fix: ",[18,1191,1192],{},"button:focus-visible { outline: 2px solid blue; outline-offset: 2px; }",". Never remove ",[18,1195,24],{}," without a visible replacement — it's an a11y violation.",[1198,1199,1200],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}",{"title":47,"searchDepth":65,"depth":65,"links":1202},[1203,1204,1207,1211,1212,1213],{"id":36,"depth":65,"text":37},{"id":203,"depth":65,"text":204,"children":1205},[1206],{"id":504,"depth":95,"text":505},{"id":760,"depth":65,"text":1208,"children":1209},"Outlines & :focus-visible — the accessible focus ring",[1210],{"id":845,"depth":95,"text":846},{"id":979,"depth":65,"text":980},{"id":1030,"depth":65,"text":1031},{"id":1114,"depth":65,"text":1115},"Border-radius elliptical math, layered box-shadow elevation (Material Design), outline vs border for focus, :focus-visible, and the overflow-clips-shadow trap. Code-first reference with accessible focus-ring systems.","md",{},"\u002Fcss\u002F12-borders-shadows-and-outlines",{"title":5,"description":1214},"css\u002F12-borders-shadows-and-outlines","wIK7mKuuXakg7FTJDvrR-UKQEamp8_1j7dVsrqTP8dc",1789924644827]