I am new to HTML and i asked my teacher but he just told me to google so...

I want to create a border like this, the ones surrounding, size,crust etc but it doesn't show up

Mine looks like this

My code looks smth like this

Does anyone have an idea how to do so?? I thought it was a problem with the CSS or something but then my teacher said it wasnt using css to make that border afterwards so Im just confused now.

My code is like this:

form {
    font-family: Arial, Helvetica, sans-serif;
    padding: 30px;
    border: 10px solid olive;
}

label {
    display: inline-block;
    width: 100px;
    margin-left: 20px;
}

<form>
    <h1>Pizza Order Form</h1>
    <label>Pizza Type:</label>
    <select name="type" id="type">
        <option>Aloha Chicken</option>
        <option>Beef Pepperoni</option>
        <option>Chicken Delight</option>
        <option>Deluxe Cheese</option>
    </select>

    <label>Quantity:</label>
    <input type="number" min="1" max="4" value="1" /> <br /><br />

    <div>
        <label>Size:</label>
        <input type="radio" id="small" />
        <label for="small">Small</label>
        <input type="radio" id="medium" />
        <label for="medium">Medium</label>
        <input type="radio" id="large" />
        <label for="large">Large</label>
    </div>
    <br />

    <div>
        <label>Crust:</label>
        <input type="radio" id="thin" />
        <label for="thin">Thin</label>
        <input type="radio" id="thick" />
        <label for="thick">Thick</label>
        <input type="radio" id="deep dish" />
        <label for="deep dish">Deep Dish</label>
    </div>

    <br />
    <div>
        <label>Toppings:</label>
        <input type="checkbox" id="Mushroom" />
        <label for="Mushroom">Mushroom</label>
        <input type="checkbox" id="Sausage" />
        <label for="Sausage">Sausage</label>
        <input type="checkbox" id="Olives" />
        <label for="Olives">Olives</label>
    </div>

    <br />
    <label>Addons:</label>
    <select>
        <option>Please select addons if required</option>
        <option>Side of Buffalo Wings</option>
        <option>Garlic Bread</option>
    </select>

</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I updated here please check here use fieldset

CodePudding user response：

checkout this codepen. this might help you :)

For HTML:

<div class="container">
  <div class="content">
    form details
  </div>
</div>

For CSS:

* {
 box-sizing: border-box;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black; 
  margin: 20px;
  padding: 4px;

}
.container .content {
  border: 10px solid olive; 
  height: 100%;
}