I need help making the corners round in a Feature grid with four column view block

[tsallis23]

I used this Custom Code to change the colour of the text part of each feature

But now the corners of the feature part are not round anymore. Is there a way to fix this with a custom code? I would like the bottom and top corners to be rounded.

Tks a lot!

[matthieu_chateau]

Can you try to add border-radius: 10px; below background: #444447 !important;

[tsallis23]

@matthieu_chateau

border-radius: 10px; below background: #444447 !important;

Like this? It did not work but maybe I am doing something wrong.

[matthieu_chateau]

nope, inside }, just below background:....; (just below etc is an indication, not be written)

[tsallis23]

Got it but now it looks like this

The corners of the black text area are round but there is white showing on the background.

I actually wanted only the bottom corners of the text area and the top corners of the picture to be round.

You are a real master Matthieu

[matthieu_chateau]

Okay, what is the type of block are you using? It’s a feature grid but which one exactly?
Feature grid with box and three column view?

[tsallis23]

Feature grid with four column view

[matthieu_chateau]

Can you try this instead of your code? =>

<style>
#feature-grid6 .feature-box {
    background-color: #444447;
}

#feature-grid7 .feature-box {
    background-color: #444447;
}
</style>

Demo still here if needed (just scroll a bit): https://test-play.softr.app/hover-mouse

[tsallis23]

@matthieu_chateau

<style>
#feature-grid6 .feature-box {
    background-color: #444447;
}

#feature-grid7 .feature-box {
    background-color: #444447;
}
</style>

The bottom part is solved, the only part remaining is the top corners of the pictures to match the bottom corners of the text part

[matthieu_chateau]

Okay as you are using a “cover” option of the image, and not “contain” option.

So it should be, finally:

<style>
#feature-grid6 .MuiBox-root.css-0 {
    background-color: #444447;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#feature-grid7 .MuiBox-root.css-0 {
    background-color: #444447;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

</style>

You can adapt 10px to have a different border corner.

[tsallis23]

You are tha man!

[matthieu_chateau]

<style>
#feature-grid6 .css-0 {  /*For future maintenance: .css-0 can be replaced by .MuiBox-root*/
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#feature-grid6 .feature-box {
    background-color: #444447;
}

#feature-grid7 .css-0 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#feature-grid7 .feature-box {
    background-color: #444447;
}

</style>

Could work better, not sure the first is totally adapted.

[AJHarris01]

This is really nice, where would I enter the code to replicate this? On an embed block or within the page code?

[matthieu_chateau]

Hi,

You should insert it in the header custom code of the page settings.