Adding border-radius to blocks

Hello! Would someone be able to help me successfully round the corners of some of my blocks? I added custom code to my header, but only the width and margin values I set are actually taking affect. I can’t get the border-radius to change. The screenshot shows which block is which.

Also, the custom code block only contains <hr> and nothing else. I’m open to changing any block type to a different block type.

I only want the gray portion to have rounded corners, and the grey portion is made of three blocks, but I want it to have rounded corners as one entity, so basically I want the top block (“Simple text” block, ID is other1) to have border-top-left-radius and border-top-right-radius affected, and I want the bottom block (“List with vertical cards and tag” block, ID is list4) to have border-bottom-left-radius and border-bottom-right-radius affected.

Here is the code currently in my page header (I also tried setting the border radius value to 10px, but no luck):

    <style>
#other1, #list4 {
    width: 80%;
    margin: 0 auto;
    border-radius: 10%;
}

#hr1 {
    width: 80%;
    margin: 0 auto;
}
</style>