Accordion: first / last child border radius error #883

New Issue

claunia · 2026-01-29T17:45:47Z

claunia commented

2026-01-29 17:45:47 +00:00

Originally created by @3hxx on GitHub (Jun 13, 2023).

Set overflow on accordion parent

.rz-accordion {
overflow: hidden;
}

2: Remove this:

.rz-accordion > div:first-child{
    border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0;
}

This is because if someone wants to add a border to the accordion with the current state the first and last child become visually impairing only slightly but see example:

Example:

BEFORE (current implementation):

AFTER (doing what I've suggested):

I've fixed it my side but other users might be experiencing the same and not even knowing it happened

Originally created by @3hxx on GitHub (Jun 13, 2023). 1) Set overflow on accordion parent .rz-accordion { overflow: hidden; } 2: Remove this: ``` .rz-accordion > div:first-child{ border-radius: var(--rz-accordion-border-radius) var(--rz-accordion-border-radius) 0 0; } ``` This is because if someone wants to add a border to the accordion with the current state the first and last child become visually impairing only slightly but see example: **Example:** BEFORE (current implementation): ![image](https://github.com/radzenhq/radzen-blazor/assets/4752086/749e77d5-c6e6-4407-bba4-aa92c209bcaa) AFTER (doing what I've suggested): ![image](https://github.com/radzenhq/radzen-blazor/assets/4752086/f510635d-2070-44a9-a53d-e6378e1e3409) I've fixed it my side but other users might be experiencing the same and not even knowing it happened

claunia closed this issue

2026-01-29 17:45:47 +00:00

claunia commented

2026-01-29 17:45:48 +00:00

@yordanov commented on GitHub (Jun 13, 2023):

Thanks for the suggestion @Freshmintyy. You should carefully use overflow as it might trigger unexpected scrolling behavior and content trimming. Instead, you could set the accordion background color to be the same as its items' background.

.rz-accordion {
    background-color: var(--rz-accordion-item-background-color);
}

BTW, is this a custom theme on the screenshots? None of Radzen's themes feature a border on rz-accordion.

@yordanov commented on GitHub (Jun 13, 2023): Thanks for the suggestion @Freshmintyy. You should carefully use `overflow` as it might trigger unexpected scrolling behavior and content trimming. Instead, you could set the accordion background color to be the same as its items' background. ```css .rz-accordion { background-color: var(--rz-accordion-item-background-color); } ``` BTW, is this a custom theme on the screenshots? None of Radzen's themes feature a border on `rz-accordion`.

claunia commented

2026-01-29 17:45:48 +00:00

@3hxx commented on GitHub (Jun 13, 2023):

Yes custom theme, I like my things to be completely custom to my site.

Ah yes, this has solved me issue. Thankyou

Quick one,

When you have an accordion with a single item in it it calls this css:

.rz-accordion > div:last-child, .rz-accordion > div:last-child > div {
    border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius);
}

This means you get a square top and a rounded bottom.

I've got around it by adding:

  .rz-accordion > .rz-accordion-header:only-child {
       border-radius: var(--rz-accordion-border-radius);
   }

@3hxx commented on GitHub (Jun 13, 2023): Yes custom theme, I like my things to be completely custom to my site. Ah yes, this has solved me issue. Thankyou Quick one, When you have an accordion with a single item in it it calls this css: ``` .rz-accordion > div:last-child, .rz-accordion > div:last-child > div { border-radius: 0 0 var(--rz-accordion-border-radius) var(--rz-accordion-border-radius); } ``` This means you get a square top and a rounded bottom. I've got around it by adding: ``` .rz-accordion > .rz-accordion-header:only-child { border-radius: var(--rz-accordion-border-radius); } ```

claunia referenced this issue

2026-01-29 18:18:33 +00:00

[PR #883] [MERGED] RadzenDataList/RadzenGrid - Add Pager-Density Property #2373

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#883