How to make rounded corners in html

    5 answers 5

    If all four corners need the same radius, then you can write one property instead of four:

    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;

    The last line for the Opera and IE9.

      To solve this problem, you can use css styles.

      Chrome, Safari.

       -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px;

      Firefox.

       -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px;

      Modern version for all browsers: border-radius: 5px;

      • there was another option with 5-6 tags, it works in IE and Opera - uramer239

      At one time, I was looking for a universal solution to this problem for all browsers, many suggested placing images with curvings of the required radius in the corners.

      • In order to support IE6 +, unfortunately, this can not be done - cy6erGn0m

      There are 3 options.

      1st: (from Expert)

       -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;

      2nd: (from Eugen)

       Спрайт с четырьями углами, положение задается через background-position

      3rd: (oldest way)

       <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div>

      Where classes have a consistent decrease in the indentation of the left and right sides.

        shortened version of border-radius: 10px 5px 4px 8px; corners start from top-left / top-right / bottom-right / bottom-left