HTML Code

<!DOCTYPE html>



<html>



<head>



  <title>CSS border-bottom-width Pixel Comparison</title>



  <style>



    body {



      font-family: sans-serif;



      padding: 1.5rem;



      background: #f8fafc;



    }



    .width-examples div {



      padding: 10px 0;



      margin: 10px 0;



      max-width: 16rem;



    }



    .w-1 {



      border-bottom: 1px solid #64748b;



    }



    .w-4 {



      border-bottom-width: 4px;



      border-bottom-style: solid;



      border-bottom-color: #2563eb;



    }



    .w-8 {



      border-bottom: 8px solid #dc2626;



    }



  </style>



</head>



<body>



  <h1>Bottom Border Width Comparison</h1>



  <div class="width-examples">



    <div class="w-1">1px bottom border</div>



    <div class="w-4">4px bottom border</div>



    <div class="w-8">8px bottom border</div>



  </div>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS border-bottom-width Property - Pixel Comparison