Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Box Model">
  <meta charset="utf-8">
  <title>Border Color</title>
</head>
<body>
  
  <style>
    p {width: 150px; background: #dddada;}
    .other {border-color: #cccccc; border-width: 10px}
  </style>
​
  <div style="position:absolute; top: 10px; left: 30px">
    border-style 
    <p>지정안함</p>
    <p style="border-style: none">none</p>
    <p style="border-style: hidden">hidden</p>
    <p style="border-style: dotted">dotted</p>
    <p style="border-style: dashed">dashed</p>
    <p style="border-style: solid">solid</p>
    
    <p style="border-style: double">double</p>
    <p style="border-style: groove">groove</p>
    <p style="border-style: ridge">ridge</p>
    
    <p style="border-style: inset" class="other">inset</p>
    <p style="border-style: outset" class="other">outset</p>
    <p style="border-top-style: solid" class="other">top</p>
    <p style="border-right-style: solid" class="other">right</p>
    <p style="border-bottom-style: solid" class="other">bottom</p>
    <p style="border-left-style: solid" class="other">left</p>
  </div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x