{"id":1888,"date":"2016-02-17T16:56:27","date_gmt":"2016-02-17T16:56:27","guid":{"rendered":"http:\/\/cssreset.com\/?p=1888"},"modified":"2016-02-17T16:56:27","modified_gmt":"2016-02-17T16:56:27","slug":"css-border-radius-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-border-radius-property\/","title":{"rendered":"CSS Border-Radius Property"},"content":{"rendered":"

The CSS border-radius<\/strong> property can be used to give HTML elements rounded corners. Most commonly, the property is seen using only one value, but it actually will take up to four values.<\/p>\n

Assigning one value to the border-radius<\/strong> property will apply that value to every corner of the HTML element. For example, if your CSS looks like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. div{<\/span><\/div><\/li>\n
  2. border-radius<\/span>:<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    Then all four corners of your div will have the same amount of rounding applied to them.<\/p>\n

    \"borderradius1\"<\/p>\n

    If the property is assigned two values, the first value will be applied to the top-left and bottom-right corners, and the second value will be applied to the top-right and bottom-left corners. So if your CSS was something like this:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. div{<\/span><\/div><\/li>\n
    2. border-radius<\/span>:<\/span> 30px<\/span> 50px<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Your div would take this kind of shape:<\/p>\n

      \"borderradius2\"<\/p>\n

      If the border-radius<\/strong> property has three values, the first value would be applied to the top left corner of an element, the second value would be applied to the top right and bottom left, and the third value would be applied to the bottom right, like this:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. div{<\/span><\/div><\/li>\n
      2. border-radius<\/span>:<\/span> 20px<\/span> 50px<\/span> 70px<\/span>;<\/span><\/div><\/li>\n
      3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        \"borderradius3\"<\/p>\n

        Finally, if the border-radius<\/strong> property has four values, each value would correspond to its own corner of the div. So the first value would be applied to the top-left corner, the second would be applied to the top-right, the third would be applied to the bottom-right, and the fourth would be applied to the bottom-left.<\/p>\n

        \r\n\r\n\t\t
        \r\n\r\n\t\t
        \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
        css<\/div>\r\n\r\n\t\t\r\n\t\t
        \r\n\r\n\t<\/div>\r\n\t\r\n\t
        \r\n\t\t
        1. div{<\/span><\/div><\/li>\n
        2. border-radius<\/span>:<\/span> 10px<\/span> 20px<\/span> 30px<\/span> 40px<\/span>;<\/span><\/div><\/li>\n
        3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

          \"borderradius4\"<\/p>\n

          Share and Enjoy !<\/h3>
          0<\/span><\/span>Shares<\/small><\/div>
          <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

          The CSS border-radius property can be used to give HTML elements rounded corners. Most commonly, the property is seen using only one value, but it actually will take up to four values.<\/p>\n

          Assigning one value to the border-radius property will apply […]<\/p>\n

          Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,4,6,36,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1888"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1888"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1888\/revisions"}],"predecessor-version":[{"id":1894,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1888\/revisions\/1894"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}