How can i insert text on Border/ box Model in css?-CodePudding

I wanna to insert text on border like this. eg Border I Added the border style to my web_page but i wanna to write my text on web_page border?

body {
    background-color:lightgrey;
    border: 60px solid gray;
    padding: 30px;
    margin: 30px;
    text-align: center;
}

CodePudding user response：

You could do it with absolute positioning however it seems like a better idea to fake it.

Just because something looks like a border, it doesn't need to be one. This won't work directly with the body, but just use a separate element instead. Remove the top border (and margin) and use an another element that is styled to look like the top border:

.with-border {
  background-color: lightgrey;
  border: 60px solid gray;
  border-top: 0;
  padding: 30px;
  margin: 30px;
  margin-top: 0;
  text-align: center; 
}
.head {
  background-color: gray;
  min-height: 60px;
  margin: 30px;
  margin-bottom: 0;
}

<div class="head">
XYZ
</div>
<div class="with-border">
ABC
</div>

CodePudding user response：

Use < fieldset > as the border, and < legend > as the text.

Like this:

<body>
    <fieldset>
        <legend>Text</legend>
    </fieldset>
</body>

with CSS code:

fieldset {
    border: 60px solid gray; 
    padding: 20px; 
    padding: 30px;
    margin: 30px;
    text-align: center;
}

CodePudding user response：

A way to achieve that is to use nested elements and style them as if they were the actual box of one element.

#content {
  background: #ddd;
  border: 1px dashed #888;
  width: 90%;
  height: 70%;
  margin: auto;
}

#padding {
  width: 90%;
  height: 80%;
  background: grey;
  margin: auto;
}

#border {
  width: 600px;
  height: 200px;
  background: lightgreen;
}

div {
  text-align: center;
}

<div id="border"> 
Border
<div id="padding"> 
Padding
<div id="content"> 
Content
</div>
Padding bottom
</div>
Border bottom
</div>

CodePudding user response：

Instead of using border you could use absolute positioning. Just wrap the component in a div tag and place the inner elements in another div tag inside.

Here is a simple example based on the image that you've attached.

.outer-border {
            background-color: forestgreen;
            position: relative;
            padding: 20px;
        }

        .inner-content {
            background-color: grey;
            color: black;
            padding: 10px;
            position: relative;
        }

        .text {
            padding: 5px;
            text-align: center;
            background-color: white;
            border: 1px dashed black;
        }

        p {
            text-align: center;
        }

<div class="outer-border">
        <p>Outer border</p>
        <div class="inner-content">
            <p class="text">Inner content</p>
        </div>
    </div>