How to border text?

HTML-CSS
1

html code

<p id="maintitle">Welcome To My First Website</p>

css code

p { color: black;
 border: solid; }

The border is there, but the left and right border take up the whole screen. How do i get it to just border the “Welcome To My First Website” bit? This is a probably a real basic thing but i cant seem to figure it out.

edit: i see you cant see the html, but its basically the text enclosed with p tags

2

It is difficult to know what you are talking about, can you share more details?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3

I am new to HTML/CSS as well so I apologise in advance if I make a mistake. p is a block element an it takes up the whole screen by default. This is why the border is over the entire screen. For now you can add width property for the p element and play around with different values in pixels. :slight_smile:

p {
width: 100px;
color: black;
border: solid;
}

4

Thanks!

So this is the text i want bordered with white line, without the left and right borders taking up the whole screen.

HTML


<p>Welcome To My First Website</p>

CSS

p { color: white;
 border: solid; }

Screenshot 2025-03-17 222639
Screenshot 2025-03-17 2226391918×858 23 KB

5

you need to set a width for the element, by default it takes the whole width available

6

Make it an inline-block element by setting the display to inline-block. Or use an inline-block element, like a span element.

7

Thanks! i used width: fit-content;

8

I used width: fit-content; but your solution also works, thanks!

9

So i used text-align: center; but adding display: inline-block; resetted it to the left again. Is that expected behavior and how can i center it again?

10

if you make it inline-block it behaves like text, that’s why you see the element went to the left

11

There is no difference between using inline-block and setting the width to fit the content in this regard. You can’t center the content if the element is content sized. What you can do, is center the element itself.

<p class="fit-content">Welcome To My First Website</p>
<p class="inline-block">Welcome To My First Website</p>

<hr>

<div class="container">
  <p class="fit-content">Welcome To My First Website</p>
  <p class="inline-block">Welcome To My First Website</p>
</div>

.fit-content {
  border: 2px solid red;
  width: fit-content;
  /* visually does nothing */
  text-align: center;
}

.inline-block {
  display: inline-block;
  border: 2px solid red;
  /* visually does nothing */
  text-align: center;
}

/* centers the elements, not the element content */
.container {
  display: grid;
  justify-content: center;
}