If I wanted to print out some text in div Tag could I implement a border into this or would I need to have a border line of code outside of the Div Tag and have the Div Tag in between. Or could I combine a Div Tag with a border

CodePudding user response：

Possible solution

Your question was a bit confusing, maybe for me? Anyways, I don't know if is this what you wanted, but if it is, you are welcome!

Implement border inside a <div> tag

Firstly you need to set border-box to your div tag. This means you have to include different CSS code for browsers, such as -moz, or -webkit. Obviously you have to specify the height and width to your object, as well as border and background colour. You can also set the margin, but it's not necessary.

Your code should look like this:

HTML

<!-- You can put even <p> tag, or any text tag into div -->
<div>
  Some text... 
</div>

CSS

 div {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 100px; /* Set your div width */
        height: 100px; /* Set your div height */
        border: 10px solid red; /* Optional amount for border, as well as colour*/
        background: #d9dbda;
        margin: 10px; /* This is optional */
      }

If you want to see this sample in your browser, click here.

CodePudding user response：

If you want to underline text, you should probably opt for text-decoration: underline;

.underline { text-decoration: underline; }

<p >This sentence has a line</p>
<p>Only <span >part of this sentence</span> has a line</p>

`.

But since I'm not quitte sure what it is you want to accomplish yet and you've asked for styling with borders with other elements (maybe for borders/lines at the top or on the side, or for different styling purposes). I'll add another example with a border. This will also be make it easier to style with different colors, width, etc

.solid-border{
  border-color: black;
  border-width: 1px;
  border-top-style: solid ;
  border-bottom-style: solid ;
}

<div >
  <p>So just some lines for this sentence right?</p>
</div>

<div>
  <p>Or maybe just a <span >small part with lines like</span> this?</p>
</div>