Image via CSS with rounded corners

Morpheus-2014

Hi,

I have on the website http://www.pixelway.de/projekt-raschdorf/

A CSS assigned to a picture see screen to display the picture round, i.e. to provide it with radii, unfortunately does not work. This is what the CSS looks like:

.round {

border-radius: 16%;

 border-width: 1px;

border-style: solid;

border-color: transparent;

-moz-border-radius: 16px;

-webkit-border-radius: 16px;

}

screen-2.jpg

Thanks for the help

Phil

Hello,

You did not assign the name of this class to the image. I have added it manually, and it is working.

Please, add a class name to this image.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Morpheus-2014

Hi,

how can I assign only three curves to the picture.

The upper left corner should not have a radius. I've tried it like this, border-bottom-left-radius: 16%;

  border-bottom-right-radius: 16%;

  border-top-left-radius: 1px;

  border-top-right-radius: 16%;

 but it doesn't work that way.

Thanks

Phil

Please, check the following link:

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

There you will find an explanation on how to set the border radius in the way you wanted.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Morpheus-2014

screen-3.jpg

Hi,

I tried to implement your suggestion, see screen, it worked so that the top left corner has no radius and all other three have a radius. I have adopted the css in my themes: border-radius: 0px 16px 16px 16px; , but it doesn't work that way, why.

Thanks

Phil

You did not change the rest of the attributes you used in that class, and that is why it was not working.

But in fact, the first line will be enough.

So when you modify it, as I showed on the screenshots, everything will work.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next