How do I customize the border color of a button?

[t1u1]

I saw that a CSS variable called --btn-border is being used to color the button's border. So I tried

@theme{
  --btn-border: #f00;
}

But that doesn't seem to have any effect. What's the right way to customize the button color?

[saadeghi]

Button has many variants. With different colors and styles and there are more than 40 different combinations in term of color.
So first we should decide which one needs a custom color 😁

Each variant defines the border color according to itself. For example btn-success uses the green color from current theme.

Here's an example of overriding the border color of primary button:

<button class="btn btn-primary border-red-600">primary</button>

You can also set the color in CSS. But there's no variable to override every single button variant. It wouldn't look good to force all button variants to have the same border color.

Please let me know if you have any questions.

[t1u1]

Thanks for your answer, and it makes sense to not have one variable for each button variant.

How do we manipulate the --btn-border variable at the theme level in combination with variant? I am imagining something like:

[data-theme="mytheme"] .btn-primary {
    --btn-border: red;
}

Alternatively, can the buttons be made to derive the border color from the variant's color. That is, a primary button's border color be derived from the primary color through a CSS color operator (like lighten / darken for dark and light themes respectively)?

If the user doesn't want the default borders, they can set the border size to zero.