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

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

<div  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?

CodePudding user response：

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

<div  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>

style="border solid 2px black"

CodePudding user response：

I would recommend reading this documentation. You are on the right lines. Try style="width: 50%; border: 2px solid black; margin: 0 auto; border: 2px black;"

Also note that if your div is the width of the html, you may only see the top and bottom. To understand how to size your box correctly, please look at this link.

Useful Links for borders: