{"id":6126,"date":"2025-08-22T03:33:50","date_gmt":"2025-08-22T03:33:50","guid":{"rendered":"https:\/\/swatilathia.com\/?page_id=6126"},"modified":"2025-09-02T05:37:47","modified_gmt":"2025-09-02T05:37:47","slug":"css-3-tutorial-2","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=6126","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