Okay
  Public Ticket #4108621
Border Radius on Flip Box
Open

Comments

  •  1
    3AH started the conversation
    July 8, 2025 at 2:59pm

    Hello Salient Team,

    Can you please advise how to implement a border radius (e.g. 10px) to create a flip box with rounded corners?

    Thanks!

    - J.

  •  365
    Pat replied
    July 8, 2025 at 10:33pm

    Hi J.,

    Thank you for reaching out.

    This can be done with a custom CSS snippet.

    Please add the following code to your Salient > General Settings > CSS/Script Related > Custom CSS Code box:

    .nectar-flip-box,
.nectar-flip-box .flip-box-front,
.nectar-flip-box .flip-box-back {
    border-radius: 10px !important; 
}

    Give it a try and let us know how it goes.

    Best wishes,

    Salient Theme Support

  •  1
    3AH replied
    July 8, 2025 at 11:30pm

    Thanks, Noah!

    And if we want to target the code to this page, how would we amend the CSS?

    https://readingpartnership.com/teaching-our-children-to-read/

    - J.

  •  365
    Pat replied
    July 9, 2025 at 12:29am

    Hi J.,

    Thank you for getting back to us.

    You can target an individual page using its class name found in the body tag. For the page you shared, the class name identifier is “page-id-3300.”

    Hope this helps! Please let us know if you need any further assistance.

    Thanks again,

    Salient Theme Support