{"id":2367,"date":"2017-03-25T07:15:56","date_gmt":"2017-03-25T07:15:56","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=2367"},"modified":"2017-03-25T10:44:23","modified_gmt":"2017-03-25T10:44:23","slug":"how-to-make-rounded-corners-using-css3","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/how-to-make-rounded-corners-using-css3\/","title":{"rendered":"How To Make Rounded Corners Using CSS3"},"content":{"rendered":"<p>With the CSS3 using \u00a0<strong><code class=\"w3-codespan\">border-radius<\/code><\/strong> property, you can give any element &#8220;rounded corners&#8221;<\/p>\n<h2>CSS3 border-radius Property Details<\/h2>\n<p>Some Examples of border-radius property:<\/p>\n<p>1. Rounded corners for an element with a specified background color:<\/p>\n<p>#corners_backgroung {<br \/>\nborder-radius: 25px;<br \/>\nbackground: #73AD21;<br \/>\npadding: 20px;<br \/>\nwidth: 200px;<br \/>\nheight: 150px;<br \/>\n}<\/p>\n<p>2. Rounded corners for an element with a border:<\/p>\n<p>#corners_border {<br \/>\nborder-radius: 25px;<br \/>\nborder: 2px solid #73AD21;<br \/>\npadding: 20px;<br \/>\nwidth: 200px;<br \/>\nheight: 150px;<br \/>\n}<\/p>\n<p>3. Rounded corners for an element with a background image:<\/p>\n<p>&nbsp;<\/p>\n<div class=\"w3-example\">\n<div class=\"w3-code notranslate cssHigh\">#corners_bg_image {<br \/>\nborder-radius: 25px;<br \/>\nbackground: url(image.png);<br \/>\nbackground-position: left top;<br \/>\nbackground-repeat: repeat;<br \/>\npadding: 20px;<br \/>\nwidth: 200px;<br \/>\nheight: 150px;<br \/>\n}<\/div>\n<\/div>\n<div class=\"w3-example\"><\/div>\n<div class=\"w3-example\"><strong>Note:<\/strong>\u00a0 The <code class=\"w3-codespan\">border-radius<\/code> property is actually a shorthand property for the <code class=\"w3-codespan\">border-top-left-radius<\/code>, <code class=\"w3-codespan\">border-top-right-radius<\/code>, <code class=\"w3-codespan\">border-bottom-right-radius<\/code> and <code class=\"w3-codespan\">border-bottom-left-radius<\/code> properties.<\/div>\n<div class=\"w3-example\"><\/div>\n<div class=\"w3-example\"><\/div>\n<div class=\"w3-panel w3-note\"><\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"With the CSS3 using \u00a0border-radius property, you can give any element &#8220;rounded corners&#8221; CSS3 border-radius Property Details Some Examples of border-radius property: 1. Rounded corners for an element with a specified background color: #corners_backgroung { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } 2. Rounded corners for an element with a border: #corners_border { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } 3. Rounded corners for an element with a background image: &nbsp; #corners_bg_image { border-radius: 25px; background: url(image.png); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } Note:\u00a0 The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[47,46],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2367"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=2367"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2367\/revisions"}],"predecessor-version":[{"id":2368,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/2367\/revisions\/2368"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=2367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=2367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=2367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}