CODEWITHSUNDEEP
csscodenameone
erluxman
erluxman

Reputation: 19385

Codenameone : How to create a circular badge with CSS?

So I was trying to create a circular badge using CSS in codenameone but so far I have been unlucky or my approach was wrong.

I wanted to create a price badge with circular green background like this :

enter image description here

I am using this CSS style :

MenuCardPrice{
        color: white;
        font-size: 8pt;
        background: #338833;
        border-radius: 50px;
        height : 100px;
        width :100px;
}

But I get a badge like this :

enter image description here

I tried changing the height and width of the style and tried being border-radius: 50% as well but that does not make much difference.

On top of that if I try to increase the radius of it the size of the container/Label increases rather than increasing the curve like this : enter image description here

What is the correct way to create a circular badge in Codenameone using CSS?

Upvotes: 1

Views: 569

Answers (1)

Shai Almog
Shai Almog

Reputation: 52760

Check out the CSS section of the developer guide here: https://www.codenameone.com/manual/css.html

RoundBorderFilled {
    background: cn1-round-border;
    color: white;
    font-size: 8mm;
    background: #338833;
    text-align:center;
    padding:3mm;
}

Upvotes: 2

Related Questions