Hi Luiz,

<option> tag in HTML does not support the border-radius property. The styling options for <option> elements are limited due to browser restrictions. 



Thanks!

Hi @Luiz Lima 

Once you drag and drop the dropdown, the CSS is automatically applied to give it a rounded edge. No further action is required. 

See the below images.

Or else you can check out this link as well.

how to customize the dropdown widget

Or try to add this class

.rounded-dropdown { 

border-radius: 10px; } 

values you can change accordingly.

And if still you haven't found your answer in it then please provide further details or, if possible, share the OML for reference. 

Regards

Prince Kumar

Hi,

Try below class and let us know,

.rounded-dropdown {

    border-radius: 8px; /* Adjust the value to control the roundness of the edges */

}

Thanks.

Hi @Luiz Lima ,

when you use the default dropdown content (text only) it uses options that are styled by the browser.

you can switch to Options Content = Custom, and then your DOM will contain a div with class dropdown-list, that you can style as you like.

Dorine

Hi Luiz,

You can try this forge component also

https://www.outsystems.com/forge/component-overview/8539/customizable-dropdown

Thanks

Hey guys.

Sorry for my question, I really didn't pay attention to the difference between the list on the cell phone and the view on the computer.

I really thought that the app would behave on cell phones the same way it behaves in the browser.

Anyway, thanks to everyone who responded.