Rounded corners using uikit

Archetypon
1

Hi, I’m trying to round corners using the uikit image stack, but there’s no option for radius, is there a way to do this or do I have to css it? Thanks!

2

Apply the class uk-border-roundedto the image stack. Or, drop the image stack into a utility stack and select that class from the settings dropdown.

2 Likes
3

At Image custom class field enter uk-border-rounded

You can find more of these classes here: https://getuikit.com/docs/utility#border-radius

2 Likes
4

Hi
That uk- border class worked, but what if a higher radius is needed, let’s say 20px?

Thank you both!

5

Then just use custom css.

Apply the class myRadius or whatever you want to call it to the stack.

Then in the custom css window in inspector put this…

.myRadius {
border-radius: 25px;
}

Changing the value of 25 to whatever you want. Or, you can put a percentage.

Just bear in mind that you are applying this to the container, not the content. So with images you need to restrict the width of the container to that of the image, otherwise it’ll look odd or appear not to work.

1 Like