Button

solid
dashed
dotted
double

Card

Card Title

solid

Standard solid outline with consistent visibility.

Card Title

dashed

Dashed pattern for subtle, segmented focus.

Card Title

dotted

Dotted line creating a lighter focus indicator.

Card Title

double

Double-line border for enhanced prominence.

Text Link

リンク solid
リンク dashed
リンク dotted
リンク double

Controls

2px
1px 8px
2px
-8px 12px
#0F39FE 
.sample:focus-visible {
  outline: 2px solid #0F39FE;
  outline-offset: 2px;
}