How to create group box-CodePudding

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:

When I run in my Visual Studio Code it appears like this:

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

CodePudding user response：

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>

CodePudding user response：

Try adding CSS to your element:

border: 5px solid black;

Example:

<fieldset style="border: 5px solid black;">
    <legend>Title</legend>
</fieldset>