Borders and effects

Outline your surfaces with borders and radius, then add rings, shadows and opacity.

Border width

Utility	Generated CSS
`Border()`	`border-width: 1px`
`Border(2)`	`border-width: 2px`
`Border(4)`	`border-width: 4px`

1px border

2px border

Dashed blue border

<div class="@Css.Border().BorderColor(Color.Slate300).P(4)">1px border</div>
<div class="@Css.Border(2).BorderColor(Color.Slate300).P(4)">2px border</div>
<div class="@Css.Border(2, Color.Blue400, BorderStyle.Dashed).P(4)">Dashed blue border</div>

Border style and color

Utility	Generated CSS
`BorderColor(Color.Slate300)`	`border-color: <value>`
`BorderSolid()`	`border-style: solid`
`BorderDashed()`	`border-style: dashed`
`BorderDotted()`	`border-style: dotted`

The composite overload combines the three border pieces in a single call:

Css.Border(2, Color.Slate300, BorderStyle.Dashed);

// expands to three utilities:
// border-2        border-width: 2px
// border-slate-300 border-color: ...
// border-dashed   border-style: dashed

Border radius

Utility	Generated CSS
`RoundedSm()`	`border-radius: 0.125rem`
`Rounded()`	`border-radius: 0.25rem`
`RoundedMd()`	`border-radius: 0.375rem`
`RoundedLg()`	`border-radius: 0.5rem`
`RoundedFull()`	`border-radius: 9999px`

<div class="@Css.RoundedSm().W(16).H(16).Background(Color.Blue500)"></div>
<div class="@Css.RoundedFull().W(16).H(16).Background(Color.Purple500)"></div>

Rings and outlines

A ring is a box-shadow based outline that follows the border radius, which makes it ideal for focus states. The outline helpers map to the native outline property.

Utility	Generated CSS
`Ring(3, Color.Blue300)`	`box-shadow: 0 0 0 3px <value>`
`Outline(2)`	`outline-width: 2px`
`OutlineHidden()`	`outline: 2px solid transparent`

Ring

<button class="@Css.Px(5).Py(2).RoundedMd().FontBold()
                @Css.Focus(f => f.Ring(3, Color.Blue300).OutlineHidden())">
    Focus me
</button>

Shadows

Utility	Generated CSS
`ShadowSm()`	`box-shadow: small`
`Shadow()`	`box-shadow: default`
`ShadowMd()`	`box-shadow: medium`
`ShadowLg()`	`box-shadow: large`

<div class="@Css.ShadowSm().P(4).RoundedMd().Background(Color.White)">sm</div>
<div class="@Css.ShadowMd().P(4).RoundedMd().Background(Color.White)">md</div>
<div class="@Css.ShadowLg().P(4).RoundedMd().Background(Color.White)">lg</div>

Opacity and cursor

Utility	Generated CSS
`Opacity(50)`	`opacity: 0.5`
`Opacity(0)`	`opacity: 0`
`Opacity(100)`	`opacity: 1`
`CursorPointer()`	`cursor: pointer`

<div class="@Css.Opacity(100).P(4).Background(Color.Blue500)"></div>
<div class="@Css.Opacity(50).P(4).Background(Color.Blue500)"></div>
<div class="@Css.Opacity(25).P(4).Background(Color.Blue500)"></div>