[Support request] Inverted border radius

Home Forums Support [Support request] Inverted border radius

Home Forums Support Inverted border radius

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2327376
    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?

    #2327518
    Ying
    Staff
    Customer Support

    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%;
    }
    #2327959
    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?

    #2327989
    Fernando
    Customer Support

    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;
    }
    #2330199
    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?

    #2330211
    Fernando
    Customer Support

    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/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.