Border radius values in Lumo

Hi,

I was trying to apply border-radius to a textfield using the values that are defined in Lumo themes https://vaadin.com/docs/v14/flow/styling/lumo/border but they are like invisible, only the -l one is visible.

What are the use for these values ?
What is the suggested border radius value for a textfield?

Thanks

I’m not entirely sure I understand your question. What is invisible?

The suggested value is the default value, no need to configure anything if you are happy with the default look and feel.

You can play around with the radius in this older lumo editor to see how it affects the look and feel of different components Lumo theme editor

Hi, what I mean is that using for example border-radius: var(--lumo-border-radius-m); for textfield doesn’t give a radius border, it changes a bit. In the lumo editor you linked on the Style → Roundness it is not using these values.

another example from the doc site I linked medium is 0.25em but in the lumo editor is 0.5em.

but it’s ok, thanks for the link I can use the values from the editor

can you paste your css code here – I suspect you’re applying that radius on the wrong element

I was using this for example

:host([theme~="ricerca-utente-input"]) [part="input-field"] {

  border-radius: var(--lumo-border-radius-m);
}

and then I apply the theme to the textfield

now I am using, for example

:host([theme~="ricerca-utente-input"]) [part="input-field"] {

  --lumo-border-radius: calc(var(--lumo-size-m) / 2);
}

and with the last on I can see the radius

right, so the reason border-radius: var(--lumo-border-radius-m); has no effect is that it is the default for text field.

if you’re referring to these sizes in the roundness dropdown in the standalone Lumo editor, those names do not map to the corresponding names of Lumo properties. They just override the radius property with a different value, without using those properties.
image.png