Search code examples
htmlcssgoogle-chromeborderchromium

How do I do rounded corners in CSS in Google Chrome

Basically I am trying to work out how I do rounded corners on a DIV in CSS that will render in google chrome

Solution

  • Google Chrome (and Safari) work with the following CSS 3 prefixes

    -webkit-border-radius: 10px;

    for all corners at 10px

    -webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;

    for the top left corner and bottom left at 8px

    For Firefox you can use:

    -moz-border-radius: 10px;

    for all the corners and 

    -moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;

    for the top left corner and bottom left