{"id":2998,"date":"2016-06-02T07:39:30","date_gmt":"2016-06-02T12:39:30","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1836"},"modified":"2016-06-02T07:39:30","modified_gmt":"2016-06-02T12:39:30","slug":"quick-tip-using-border-radius-to-create-round-elements","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-using-border-radius-to-create-round-elements\/","title":{"rendered":"Quick Tip: Using Border-Radius to Create Round Elements"},"content":{"rendered":"

CSS3’s border-radius property is most commonly used to add rounded corners to elements that are otherwise square. It’s a great tool for adding some softness to your designs. Less commonly, the property is also used to turn square images into perfect circles (if you’re looking for a circle, your image has to be square, otherwise you’ll end up with some variation of an oval).<\/p>\n

\"borderradius\"<\/p>\n

If you start with the square image above and apply the following CSS to it, it becomes a perfect circle, as seen in the image below.<\/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. img{<\/span><\/div><\/li>\n
  2. border-radius<\/span>:<\/span> 100%<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/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":"

    CSS3’s border-radius property is most commonly used to add rounded corners to elements that are otherwise square. It’s a great tool for adding some softness to your designs. Less commonly, the property is also used to turn square images into […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174,181],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2998"}],"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=2998"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2998\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2743"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}