{"id":1791,"date":"2022-02-14T16:09:18","date_gmt":"2022-02-14T16:09:18","guid":{"rendered":"https:\/\/swatilathia.com\/?page_id=1791"},"modified":"2025-08-28T03:17:33","modified_gmt":"2025-08-28T03:17:33","slug":"css-3-tutorial","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=1791","title":{"rendered":"CSS 3 Tutorial"},"content":{"rendered":"\n

Table of Contents<\/p>\nToggle<\/span>

border-bottom-left-radius Property<\/strong>: <\/strong>It adds rounded border to the bottom-left corner of a given element. Values may be : %, pixels<\/li>\n\n\n\n
border-bottom-right-radius Property<\/strong>: <\/strong>It adds rounded border to the bottom-right corner of a given element. Values may be : %, pixels<\/li>\n\n\n\n
border-top-left-radius Property<\/strong>: <\/strong>It adds rounded border to the top-left corner of a given element. Values may be : %, pixels<\/li>\n\n\n\n

border-top-right-radius Property<\/strong>: <\/strong>It adds rounded border to the top-right corner of a given element. Values may be : %, pixels<\/li>\n<\/ul>\n\n\n\n
Example<\/strong>:<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e7{\n\t\t\t\tborder-bottom-left-radius:25px;\n\t\t\t\tborder-top-left-radius:25px;\n\t\t\t\tborder-bottom-right-radius:25px;\n\t\t\t\tborder-top-right-radius:25px;\n\t\t\t\tborder:2px solid lightblue;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e7'>Border with radius for each side<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n\n\t\n\t\t