outline-color
En esta página
| Clase | Propiedades CSS |
|---|---|
outline-inherit |
outline-color: inherit; |
outline-current |
outline-color: currentColor; |
outline-transparent |
outline-color: transparent; |
outline-(<custom-property>) |
outline-color: var(<custom-property>); |
outline-[<value>] |
outline-color: <value>; |
Examples#
Basic example#
Use utilities like outline-rose-500 and outline-lime-100 to control the color of an element's outline:
{
outline-blue-500
outline-cyan-500
outline-pink-500
<!-- [!code classes:outline-blue-500,outline-cyan-500,outline-pink-500] -->
<button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>
Changing the opacity#
Use the color opacity modifier to control the opacity of an element's outline color:
{
outline-blue-500/100
outline-blue-500/75
outline-blue-500/50
<!-- [!code word:/100] -->
<!-- [!code word:/75] -->
<!-- [!code word:/50] -->
<button class="outline-2 outline-blue-500/100 ...">Button A</button>
<button class="outline-2 outline-blue-500/75 ...">Button B</button>
<button class="outline-2 outline-blue-500/50 ...">Button C</button>