Creating an oval

Design help General
1

Hey,

So I am looking to create an oval purely in webflow. I have played around with border-radius and [this][1] tutorial but the functionality in webflow doesn’t seem to allow for that format of input into the border-radius field in the designer.

If anyone has any thoughts on this or workarounds that would be great.

Thanks,

Arthur
[1]: The Shapes of CSS | CSS-Tricks - CSS-Tricks

2

Hi arthur. Webflow simlifies a few CSS properties and Border is one of them. There’s a bit more complexity in Border than what Webflow allows. Css allows for 2 values per corner, one for each direction. What you can do is add custom CSS code, from the dashboard or with the HTML widget, to declare your more complex border radius.

Example of what is possible with CSS:

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
3

Thanks! I was hoping for a webflow workaround bcs webflow workarounds :heart::heart::heart: but thats fine.

Arthur

4

I tried to find one for 15mn with no luck :smile:

Now if you don’t want to use custom code, you should make a nice oval in Illustrator or Sketch and export it as SVG. It weights nothing and is easy to use as a background. Note that you can also grab the SVG code, from Inkscape for example, and paste it within SVG tags in the HTML code widget.

5

@vincent that’s fine, looks like svg is the way to go!

Thanks for the help,

Arthur