Archived topic
Inverted border radius
5 replies · Started by Eddie on August 29, 2022
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?
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%;
}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?
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;
}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?
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/
