skip to Main Content

I have found this code for creating group box :

<fieldset>
    <legend>Title</legend>
</fieldset>

It is said that it creates the following group box at runtime:
enter image description here

When I run in my Visual Studio Code it appears like this:
enter image description here

The border is hardly visible and the text appears in a wrong place. Am I doing something wrong?

2

Answers


  1. Try adding CSS to your element:

    border: 5px solid black;
    

    Example:

    <fieldset style="border: 5px solid black;">
        <legend>Title</legend>
    </fieldset>
    Login or Signup to reply.
  2. The issue is that all browsers have different default styling. Yours is unusual.

    I copied some of my User Agent Stylesheets from MacOS+Chrome109

    fieldset {
        display: block;
        margin-inline-start: 2px;
        margin-inline-end: 2px;
        padding-block-start: 0.35em;
        padding-inline-start: 0.75em;
        padding-inline-end: 0.75em;
        padding-block-end: 0.625em;
        min-inline-size: min-content;
        border-width: 2px;
        border-style: groove;
        border-color: rgb(192, 192, 192);
        border-image: initial;
    }
    
    legend {
        display: block;
        padding-inline-start: 2px;
        padding-inline-end: 2px;
        border-width: initial;
        border-style: none;
        border-color: initial;
        border-image: initial;
    }
    <fieldset>
      <legend>Title</legend>
    </fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search