Css not working in Lightning Web Component

Question

I have this below HTML page in LWC -

<lightning-layout multiple-rows="true">
            <lightning-layout-item padding="horizontal-small" size="4">
                <div class="borderclass">
                    Owner : <br/>
                    {record.fields.Account__r.value.fields.Name.value}
                </div>
            </lightning-layout-item>
</lightning-layout>

And below is the CSS -

.borderclass {
  border-radius: 50%;
}

I want to create a border around the lightning-layout-item. But it is not working.

Answer 1

You need an actual border for it to be effective:

.borderclass {
  border-radius: 50%;
  border: 1px solid red;
}