{"id":4640,"date":"2017-10-10T04:49:01","date_gmt":"2017-10-10T04:49:01","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4640"},"modified":"2017-10-10T04:49:01","modified_gmt":"2017-10-10T04:49:01","slug":"rounded-corners-in-css","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/rounded-corners-in-css\/","title":{"rendered":"Rounded Corners in CSS"},"content":{"rendered":"
Rounded corners<\/strong> used to be the stuff of constricting solid background images or, for flexible boxes, numerous background images, one per-corner, slapped on multiple nested div<\/code>elements. Argh, ugly. Well, not any longer. Now, with simple CSS, you can lavish your designs with more curves than Marilyn Monroe.<\/p>\n<\/header>\n
\n

Border radius?<\/h2>\n

Yeah. Border radius. Fear not, though \u2014 you don\u2019t have to have borders. The border-radius<\/code><\/a> property can be used to add a corner to each corner of a box.<\/p>\n

\r\n#marilyn<\/span> {<\/span>\r\n    background<\/span>:<\/span> #fff;<\/span>\r\n    width<\/span>:<\/span> 100px;<\/span>\r\n    height<\/span>:<\/span> 100px;<\/span>\r\n    border-radius<\/span>:<\/span> 20px;<\/span><\/strong>\r\n}<\/span>\r\n<\/code><\/pre>\n
And there you have it. Rounded corners, see? Well, you will if you\u2019ve got a sensible browser (see note below).<\/p>\n
\n
<\/div>
Corners are cut around the corresponding quarters of a circle (or ellipse) with the specified radius.<\/figcaption><\/figure>\n
Of course, if you do<\/em> want a border\u2026<\/p>\n
\r\n#ok_a_border_then<\/span> {<\/span>\r\n    border<\/span>:<\/span> 5px solid #8b2;<\/span>\r\n    width<\/span>:<\/span> 100px;<\/span>\r\n    height<\/span>:<\/span> 100px;<\/span>\r\n    border-radius<\/span>:<\/span> 5px;<\/span><\/strong>\r\n}<\/span>\r\n<\/code><\/pre>\n
\n
Multiple values<\/h2>\n
border-top-left-radius<\/code><\/a>, border-top-right-radius<\/code><\/a>, border-bottom-right-radius<\/code><\/a>, and border-bottom-left-radius<\/code><\/a> can also be used to target specific corners.<\/p>\n
Ever so slightly less horribly wordy, you can also define all corner radii (what a great word) individually with a space-separated list of values, working clockwise from top-left, just like other shorthand properties:<\/p>\n
\r\n#monroe<\/span> {<\/span>\r\n    background<\/span>:<\/span> #fff;<\/span>\r\n    width<\/span>:<\/span> 100px;<\/span>\r\n    height<\/span>:<\/span> 100px;<\/span>\r\n    border-radius<\/span>:<\/span> 6px 12px 18px 24px;<\/span><\/strong>\r\n}<\/span>\r\n<\/code><\/pre>\n
\n
<\/div>
Multiple-value border-radius.<\/figcaption><\/figure>\n