How to make border to fit with the content (the button border)

[activerify]

How to make border wrap around the content just fit with the content

I want it to fit like this:

Here is my current button border (see at the bottom of the page)

https://viralifi.com/premium/product/men-backpack-for-large-capacity-style

Appreciate your kind help.
Thank you

[thai]

Hi There,

Please find this custom CSS:

p.discount {
    color: white;
    font-size: 50px;
    border-color: hsl(0,0%,100%);
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 100em;
    padding: 0.429em 1.143em 0.643em;
    border: 2px solid #fff;
}

And change to this:

p.discount {
    float: left;
    color: white;
    font-size: 50px;
    border-color: hsl(0,0%,100%);
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 100em;
    padding: 0.429em 1.143em 0.643em;
    border: 2px solid #fff;
}

Let us know how it goes!

[activerify]

Thank you. works perfectly with float left. But when i change to "float: center; that button, the border turns to a wider border.

[christopher]

Hi there,

We do not have float: center in CSS. To make the button centered and keep the width as the text itself you need to make the button inline-block. To do so you need to change the code to:

p.discount {
    float: none;
    color: white;
    font-size: 42px;
    border-color: hsl(0,0%,100%);
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 100em;
    padding: 0.429em 1.143em 0.643em;
    border: 2px solid #fff;
    display: inline-block;
}

I strongly suggest that you invest time to get familiar with tips and tricks of CSS as it will give you a huge amount of freedom to customize things around. To get started:

https://www.w3schools.com/css/

Thank you.

[activerify]

It works just great. thank you for comprehensive advice.

[christopher]

Glad that we could be of a help