Menu
If there any way to make a box looks like the one here with HTML/CSS:
748
For the four borders, we need four <fieldset> elements, each containing a <legend> element inside. We add the text that will appear at the borders inside the <legend> elements. To begin, we stack the <fieldset> elements on top of each other in a grid cell and give them borders.
Put the text inside a header or <p> inside the <div></div> Then it will be inside the box.
You may be looking for the HTML fieldset and legend elements, which apply to forms.
From MDN:
<fieldset>
The HTML
<fieldset>element is used to group several controls as well as labels (<label>) within a web form.<label>
The HTML Label Element (
<label>) represents a caption for an item in a user interface.
As mentioned before, the fieldset and legend elements are used when creating forms.
If you just want to put a label box on a border, you can use absolute positioning, like this:
HTML
<div id="container">
<div id="label">I'm a Box</div>
</div>
CSS
#container {
height: 100px;
width: 300px;
border: 1px solid black;
position: relative;
}
#label {
position: absolute;
top: -10px;
left: 20px;
height: 20px;
width: 100px;
background-color: pink;
border: 2px solid red;
text-align: center;
}
The above code renders this:
DEMO
84
you can use "position absolute", something like below:
.a {
margin-top: 50px;
height: 100px;
width: 100%;
border: 2px solid red;
}
.b {
position: absolute;
top: 40px;
left: 20px;
border: 2px solid red;
height: 20px;
width: 20%;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="a">
<div class="b">test</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
