Make border just around text, not the whole block

Question

In the following snippet, the border outlines the block and not just around the text inside it:

.border {
  font-size: 30px;
  text-align: center;
  border: red 2px solid;
}

<p class="border">Learn More!</p>

I have tried inline-block and it does work, however, I want it centered on the page and align-text / align-items does not work in that case.

from the duplicate: https://stackoverflow.com/a/10568245/8620333 — Temani Afif, Jan 19 '22 at 08:50

score 0 · Answer 1 · answered Jan 19 '22 at 01:30

0

You can use a span just for the word you want to box, inside the paragraph. Also, you should avoid calling a class "border". Here is what I suggest :

<p class="title"><span style="border: red 2px solid">Learn More!</span></p>

.title{
    font-size: 30px;
    text-align: center;
}

answered Jan 19 '22 at 01:30

Benjamin Rio

652
2
17

Why should one avoid caling a class 'border' if that it its function? (It may be to add borders to several elements which themselves may have different meanings but all want the same border).. – A Haworth Jan 19 '22 at 05:40
It could become ambiguous if you are using another type of border (other color, not centered, ...) and that will certainly eventually happen. The name of the class would rather refer to the content that the class selects. – Benjamin Rio Jan 19 '22 at 10:52

score 0 · Answer 2 · answered Jan 19 '22 at 01:35

If you want a border around the word, use span tags. If you want a border around the characters, use SVG text and apply a stroke (with width and color). And to center inline elements (display: inline/inline-block) you have to set the text-align property on the parent element.

score 0 · Answer 3 · answered Jan 19 '22 at 01:39

Wrap the inline-block in a div (block element) and use text-align: center on it.

.border {
    font-size: 30px;
    text-align: center;
    border: red 2px solid;
    display: inline-block;
}

#wrapper {
  text-align: center;
}

<div id="wrapper"><p class="border">Learn More!</p></div>

score 0 · Answer 4 · answered Jan 19 '22 at 01:42

0

You can apply a class to a div like the following:

<div class="container">Learn More!</div>

<style>
.container {
    padding: 5px;
    font-size: 30px;
    text-align: center;
    border: red 2px solid;
    margin: auto;
    width: 30%;
}
</style>

answered Jan 19 '22 at 01:42

Anthony Bird

200
2
7

Riios · Answer 5 · 2022-01-19T01:55:58.747

0

Fonts on the web are vector-based graphics, you can use -webkit-text-stroke, although it's not supported by E11. That's shorthand for using -webkit-text-fill-color, -webkit-text-stroke-width and -webkit-text-stroke-color. So you'd be using something like:

.border {
  font-size: 30px;
  text-align: center;
  -webkit-text-stroke: 2px red;
}

Example: https://jsbin.com/ribacacazi/edit?html,css,output

edited Jan 19 '22 at 01:55

answered Jan 19 '22 at 01:50

Riios

87
2

score 0 · Answer 6 · answered Jan 19 '22 at 05:54

0

 .border-span {
            font-size: 30px;
            text-align: center;
            border: red 2px solid;
            padding:10px;
        }

    <p>
        <span class="border-span">Learn More!</span>
    </p>

answered Jan 19 '22 at 05:54

Iron Man

35
3

score 0 · Answer 7 · answered Jan 19 '22 at 06:12

You can specify a width (use max-content to fit the maximum width of the content), and then add a margin: auto for it to be centered (as it is a <p> it has display: block and it will center the element, if you use a different element, you may need to specify a block-type display.)

Here is an example:

.border {
  font-size: 30px;
  text-align: center;
  border: red 2px solid;
  width: max-content;
  margin: auto;
}

<p class="border">Learn More!</p>

Make border just around text, not the whole block

7 Answers7