Border on radio button

i want to achieve radio button that looks something like this 

Not necessarily exact same but a brooder surrounding the whole option


Hi @J K,

I have used the below CSS and achieved the attached scenario. Kindly let us know if it helps.

 .radio-group .OSFillParent{       border: 2px solid grey;    border-radius: 25px;    padding: 10px;        width: max-content;}.radio-button:checked:before {    background-color: var(--color-neutral-0);    border: 6px solid grey;}

Hello Jerome,

This was very helpful, my main issue wasn't in the css itself but where to apply it and this cleared it up thanks!

I am still though not able to change the color once its selected would you know where I should be applying that styling 

HI @J K,

This CSS works for both selected and not selected.

Please find below the screenshot and link.


I Meant the background color changing on select 

Hi J K,

I hope you're doing well. My suggestion is to increase the border radius. 

i.e border-radius: 25px;

border-style: solid;

border-width: 1px;

I hope this will help a little bit. Play with CSS you'll get an idea.


Ankit S.

Hi JK,

Please have look at the attached OML for your reference.

check the employee detail screen css.

Hope it helps.



Hi J K,

this works : 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.