Border Radius February 24, 2015 Get link Facebook X Pinterest Email Other Apps Border Radius <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css.css" /> <title>css class</title> <style> .test{ height:100px; width:300px; background:#333333; padding:10px; margin:10px; border-radius: 10px; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> </head> <body> <div class="test"> <p> Border Radius</p> </div> </body> </html> Border-top-right-radius <style> .test{ height:100px; width:300px; background:#333333; padding:10px; margin:10px; border-top-right-radius: 34px; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> Border-top-left-radius <style> .test{ height:100px; width:300px; background:#333333; padding:10px; margin:10px; border-top-left-radius: 34px; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> Border-bottom-left-radius <style> .test{ height:100px; width:300px; background:#333333; padding:10px; margin:10px; border-bottom-left-radius: 34px; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> Border-bottom-right-radius <style> .test{ height:100px; width:300px; background:#333333; padding:10px; margin:10px; border-bottom-right-radius: 34px; } .test p{ color:#FFFFFF; font-size:16px; text-shadow: 3px 2px 3px #00ff00; } </style> Comments
Comments
Post a Comment