border-radius:3% doesn't generate rounded edges any more

[heynen]

Dear all,

I have several objects that all have a name that begins with "news".

For these objects, I have defined the following style:

Code: Select all

<style>
[id*="news"]
{border-radius:15px;cursor:pointer;}
</style>

This code is inserted between the "head" tags of the page. Before, this would generate nice rounded edges for any object named "news". Since I am working with version 18, this doesn't work any more: The edges are rectangular now. The "cursor:pointer" style works, but not the "border-radius". Also, if I add the "border-radius" style directly into the object, it works.

You can see it here: https://www.freiblatt.de/Medien.php
The first box on the page has rounded edges, because I added the "border-radius" command directly into the html of the box.
The second box doesn't have rounded edges, although I have added the "border-radius" command into the style that belongs to this object.

Hope anyone can help!

Thanks, Malte

[BaconFries]

Are you using the latest build WYSIWYG Web Builder 18.3.0 (last update: July 7, 2023)
See the following;
https://www.wysiwygwebbuilder.com/download.html

[heynen]

Thank you, yes, I updated an hour ago, but that didn't solve the problem.
PS: I have made the problem description (see above) more detailed now.

[wwonderfull]

try this code

Code: Select all

<style>[id*="news"]{border-radius:15px;cursor:pointer;}</style>

[Pablo]

First note that many objects have their own 'border radius properties, so in most cases you do not have to add it via code.

Also, it looks like you have applied the border-radius to the inner div. It may be better to apply it the outer div.

Code: Select all

[id*="wb_news"]{border-radius:15px;cursor:pointer;}

[crispy68]

Your code is right; however it may be overwritten by other CSS. So write the code like this:

Code: Select all

<style>
[id*="news"]
{border-radius:15px !important;cursor:pointer;}
</style>

Also, make sure that your ID's begin with the word 'news'. Your 2nd box ID is named 'ueber_uns' and missing this word. Change it to something like 'news_ueber_uns'.

[wwonderfull]

I myself use alot of custom codes for css js and even html but as @pablo said if there is a dedicated property for border radius for the grids. I still dont understand why we are poking it with custom codes. Its like coming from the window although we have a door.

[heynen]

Thank you everyone, it's great to receive so many helpful answers quickly!

So now I have multiple ways to solve the problems, thank you!

And, true, I didn't know that I can just add the rounded edges directly in the grid properties. That sounds like the cleanest solution (but for now, it's quicker for me to just add it in the extra code, so that it will be applied to all "news" objects at the same time).

Thanks again,

Malte