Is there any way to make cover images on grid blocks completely round?

Custom Coding
,
1

I’m using a grid block to show a list of people with their headshots, and the design would look nicer if they were round. Is there any CSS I can use to round the images all the way, instead of the rounded corners that come in the design section?

Thanks

2

Try this (change the #grid-block-1 (in 2 places) to match the name of your grid block)

<style>

/* Target images only within grid-block-1 */

#grid-block-1 [data-testid="image"] {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  padding: 15px; /* Creates space around the circle */
  box-sizing: border-box;
}

/* Ensure the image fills the circle properly without distortion */

#grid-block-1 [data-testid="image-inner-img"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%; /* Ensures the image itself is circular */
}
</style>
3

this worked perfectly, thank you!

1 Like
4

One more question if anyone can help. I also want to center the text within each record in the grid. I don’t understand why centering text is not built into the native styling options!

How do I identify the field ID to target?