Outline Style
Use outline style utilities to control the stroke pattern of an element’s
outline. Dashed, dotted, and double strokes are painted by DashedBorderPainter
(the same painter used by border-dashed).
Setting the outline style
Section titled “Setting the outline style”Use outline-solid, outline-dashed, outline-dotted, or outline-double
to set the outline style:
Style('outline-2 outline-offset-2 outline-solid ...', child: Text('Button A'))Style('outline-2 outline-offset-2 outline-dashed ...', child: Text('Button B'))Style('outline-2 outline-offset-2 outline-dotted ...', child: Text('Button C'))Style('outline-3 outline-offset-2 outline-double ...', child: Text('Button D'))Hiding an outline
Section titled “Hiding an outline”Use outline-hidden to hide the default browser outline while keeping it
visible in forced-colors mode. In Flutter this sets a transparent solid
outline (outline: 2px solid transparent; outline-offset: 2px):
Style('focus:border-indigo-600 focus:outline-hidden ...')Removing outlines
Section titled “Removing outlines”Use outline-none to completely remove outlines. Combine with
focus-within:outline-* to style a container when a child is focused:
Style('focus-within:outline-2 focus-within:outline-indigo-600 ...', children: [ Style('outline-none ...'), Style('...', child: Text('Post')),])Class reference
Section titled “Class reference”| Class | Description |
|---|---|
outline-solid | Solid outline (explicit; default when width is set) |
outline-dashed | Dashed outline (painted by DashedBorderPainter) |
outline-dotted | Dotted outline with round caps |
outline-double | Two parallel solid lines with a gap |
outline-none | Removes outline (outline-style: none) |
outline-hidden | Transparent 2px solid outline with 2px offset |