How to set border inner radius [contained elements to have curved corners too]

This topic contains 5 replies, has 2 voices, and was last updated by  Sebastian 6 years, 1 month ago.

Author Posts

robertlo

Is there a way in MT GUI to set an inner radius for a border. So far, I see that even if the border radius is curved, the inside of the border corners is 90 degrees. I saw some CSS to change it manually, but I’m wondering if there’s a setting in the MT GUI that will do it.

Thanks,
Rob


Sebastian

Hey Robert,

From what you describe, it sounds like you might need to also set border-radius on a child element nested inside of the current element you are targeting. If that child element has a background color, its square dimensions will be visible. Border-radius is not a property that child elements inherit from their parent.

If you could send me a link to the page you’re working on I can confirm my theory and provide further instruction.

Cheers,
Sebastian


robertlo

Sure. You can see the page at http://aeprubber.com/bypass

There is a coming soon page, but that link should bypass it for you.

You will see the 2 squared sections at the top, under the header, that show a border around them on hover. You’ll see off hover, those images have rounded corners, but on corner, the border has rounded corners, but the images do not. I’d like to see if it’s possible for the image to have rounded corners inside of the border that shows on hover.

Also, is it possible in MT GUI to change the animation speed of the on hover border?


Sebastian

Ah, I see what you mean now. So one way to approach this would be to use padding and a background colour on the div instead of setting the border property. You would also need to insert the images as real HTML images, not as background-images. And then set a border-radius on the images.

Another approach is described here: http://stackoverflow.com/questions/4839613/how-to-make-round-corners-to-both-inside-of-a-box-and-its-border (it seems that you could achieve this via the Microthemer’s GUI options as it just involves adjusting the border width and radius together. I haven’t tested the method myself.)

Finally, you could just copy and paste the CSS you mentioned at the start of your post into the new <> area on GUI selectors.

Are any of the above solutions doable?

Cheers,
Sebastian


robertlo

Well this theme (Beaver Builder) lets you select an image as a “column” (within a row) background. And I added a custom css button made with MT in that column, and gave it the appropriate padding to center it.

So to not use a background image, but and html image instead would mean I’d have to add more code to position the button on top of the image, and truthfully, I’ve spent too much time trying to figure this out on this particular project.

I knew it would be a stretch to do this in MT and this theme without doing it completely custom, but I thought I’d ask. I think I’ll leave it as it for now.

But now that I think about it. I could just simply use MT to use a different background image on hover, and create an image that has all the round corners I want in photoshop. It wouldn’t be css borders, but it would be the same effect.


Sebastian

Photoshop is always an option!

You must login or register to reply to this topic.