How do I envelope my div with a border in html?

March 9, 2022

I have a piece of HTML code. I want to give a border to my div:

<div class="mb-3" style="width: 50%; margin: 0 auto; border: 2px black;">
  <label for="scannerName">Select preferred scanner :</label><br>
  <select name="scannerName" id="scannerName" style="text-align: center; width: 50%;"></select><br><br>
  <label for="pixelMode">Select pixel mode :</label><br>
  <select name="pixelMode" id="pixelMode" style="text-align: center; width: 50%;"></select><br><br>
  <label for="resolution">Select resolution :</label><br>
  <select name="resolution" id="resolution" style="text-align: center; width: 50%;"></select><br><br>
  <label for="imageFormat">Select image format :</label><br>
  <select name="imageFormat" id="imageFormat" style="text-align: center; width: 50%;"></select><br><br>
</div>

I had tried the inline style="border:2px black" but the border isn’t showing. How do I give the border?

>Solution :

You need to specify the type of the border, for example the border will be solid with :

<div class="mb-3" style="width: 50%; margin: 0 auto; border: 1px solid black;">
    <label for="scannerName">Select preferred scanner :</label><br>
    <select name="scannerName" id="scannerName" style="text-align: center; width: 50%;"></select><br><br>
    <label for="pixelMode">Select pixel mode :</label><br>
    <select name="pixelMode" id="pixelMode" style="text-align: center; width: 50%;"></select><br><br>
    <label for="resolution">Select resolution :</label><br>
    <select name="resolution" id="resolution" style="text-align: center; width: 50%;"></select><br><br>
    <label for="imageFormat">Select image format :</label><br>
    <select name="imageFormat" id="imageFormat" style="text-align: center; width: 50%;"></select><br><br>
</div>