[Support request] Inverted border radius

[Eddie]

Hi there

I am loving GeneratePress! Currently working on a website based on your ‘Connections’ theme and one thing I’m struggling with is how to create some inverted border radius. Within the menu, I can curve the border corners but the menu won’t let me add a minus number, so I cannot invert them.

As part of our brand, it’s intended for our borders to feature borders like this: https://stackoverflow.com/questions/23984497/border-corner-shape-scoop-doesnt-work

It’s only meant as a thin line border round an image but for whatever reason, I cannot get the border corner to scoop / invert like this. A

Any suggestions please?

[Ying]

Hi Eddie,

As this is not a theme-related question, we can’t offer a fully customized solution, but I’ll attach the CSS from your linked source below for you to have a try.

You might need to modify the values a bit in order to make them more suitable for your button.

.nav-button a {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 700;
    padding: 15px 32px !important;
    line-height: 25px !important;
    background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, steelblue 15%) no-repeat;
    background: radial-gradient(circle at 0% 100%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, steelblue 15%) no-repeat;
    background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
    background-size: 75% 75%;
}

[Eddie]

Hi, Ying – thanks for you reply!

Apologies, I didn’t mean the nav button actually. I mean the single line borders you find on the ‘Connections’ theme. E.g. on the home page, there is a half border around a picture near the top and then further down the page there are black single line borders around the testimonials and images.

Anything we can do here?

[Fernando]

Ying’s CSS should still work.

Just add a custom CSS class to the element you wish to have that border.

For instance, you have a class called roundcorner. So, if you add this code, it should take effect on those elements:

.roundcorner {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 700;
    padding: 15px 32px !important;
    line-height: 25px !important;
    background: -webkit-radial-gradient(0% 100%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(0% 0%, circle, transparent 15%, steelblue 15%) no-repeat, -webkit-radial-gradient(100% 100%, circle, transparent 15%, steelblue 15%) no-repeat;
    background: radial-gradient(circle at 0% 100%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 0% 0%, transparent 15%, steelblue 15%) no-repeat, radial-gradient(circle at 100% 100%, transparent 15%, steelblue 15%) no-repeat;
    background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
    background-size: 75% 75%;
    border: 0;
}

[Eddie]

Thanks, Fernando. I got this working but it only made the whole shape a colour – instead I’d like to the colour to remain white but have a thin black border.

Any chance we can get it to do that?

[Fernando]

As this is not within our scope of support, it would be best to reach out to a developer or ask for recommendations in our Facebook group: https://www.facebook.com/groups/generatepress/

[Author]

Posts