फोकस रिंग परीक्षक

Outline · box-shadow फोकस शैली पूर्वावलोकन

Outline width (px)

Outline offset (px)

Outline color

CSS सेलेक्टर

:focus-visible

:focus

केवल कीबोर्ड (अनुशंसित)

solid

dashed

dotted

Add box-shadow ring

नीचे दिए गए कंट्रोल पर क्लिक करें या फोकस रिंग देखने के लिए Tab दबाएँ।

CSS

:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

कैसे उपयोग करें

Adjust outline width, offset, and color using the numeric inputs and color picker.
Choose outline style: solid, dashed, or dotted.
Optionally enable box-shadow and set its spread and color for a dual-ring effect.
Tab into the preview button or input to see the focus ring rendered live.
Copy the generated CSS to use in your own stylesheet.

Setting width 3px, offset 2px, color #0066FF, style solid produces outline: 3px solid #0066FF; outline-offset: 2px; visible on the preview button when focused.
Enabling box-shadow with spread 4px and color rgba(0,102,255,0.4) adds a soft glow ring around the outline.

उत्पादन में उपयोग से पहले आउटपुट सत्यापित करें। कोई वारंटी नहीं — देखें शर्तें.