边框样式有全边框和单个边框样式，可对每条边设置不同的样式
如下代码P1为全边框样式，P2为单个边框设置不同的样式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css边框样式</title> <style> #p1{ background: yellowgreen; border:4px dotted rebeccapurple; border-radius: 20px; width:200px; text-align:center; padding:5px; color:#fff; font-weight:bold; } #p2{ background: rebeccapurple; border:4px dashed skyblue; border-radius: 5px; width:200px; text-align:center; padding:5px; color:#fff; font-weight:bold; border-bottom-color: palegreen; border-top-style: dotted; } </style> </head> <body> <p id="p1">这是一段测试文字</p> <p id="p2">这是一段测试文字</p> </body> </html>