圆角属性：border-radius
<style type="text/css"> .content{ border: 1px solid green; width: 200px; height: 150px; background-color: grey; /*为了兼容不同浏览器，通常这么写*/ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } </style>
实现圆角按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .btn{ width: 150px; height: 50px; font-size: 16px; background-color: green; border: 0px ; border-radius: 5px; } </style> </head> <body> <input type="button" class="btn" value="我是圆角按钮"/> </body> </html>
效果：
