每边设置不同的边框 - 本例演示如何在元素的各边设置不同的边框。 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    p.one {
      border-style: dotted solid dashed double;
    }

    p.two {
      border-style: dotted solid dashed;
    }

    p.three {
      border-style: dotted solid;
    }

    p.four {
      border-style: dotted;
    }
  </style>
</head>

<body>
  <p class="one">This is some text in a paragraph.</p>
  <p class="two">This is some text in a paragraph.</p>
  <p class="three">This is some text in a paragraph.</p>
  <p class="four">This is some text in a paragraph.</p>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    p.one {
      border-style: dotted solid dashed double;
    }
​
    p.two {
      border-style: dotted solid dashed;
    }
​
    p.three {
      border-style: dotted solid;
    }
​
    p.four {
      border-style: dotted;
    }
  </style>
</head>
​
<body>
  <p class="one">This is some text in a paragraph.</p>
  <p class="two">This is some text in a paragraph.</p>
  <p class="three">This is some text in a paragraph.</p>
  <p class="four">This is some text in a paragraph.</p>
</body>
</html>