Putting text on a border with css?

Question

So I am trying to make a simple border for a site, in css:

    html{
    border-top:3em solid #26282B;

}

I would like to have some white text on top of it, how can I do this? I tried making a class, but it always appears under the border.

Do you literally mean to have the text as part of the border? Or do you mean located above the border? — thgaskell, Feb 15 '14 at 02:00
Possible duplicate of [Text in Border CSS HTML](http://stackoverflow.com/questions/7731310/text-in-border-css-html) — Stephen Ostermiller, Jul 11 '16 at 12:28

score 2 · Accepted Answer · answered Feb 15 '14 at 02:05

You CAN NOT make any text in the border. Use div or something.

Here is the example:

<html>
<head>
  <style>
      body{margin:0;padding:0;}
      .someclass {
          width:100%;
          height:3em;
          background-color:#26282B;
          color:white;
      }
  </style>
</head>
<body>
    <div class='someclass'>
        Sometext Here
    </div>
</body>
</html>

score 1 · Answer 2 · answered Feb 15 '14 at 01:56

You can put your text in a span or div set a class name and using left, top, right, bottom, fix the position like this: e.g class="example"

.example {
  position:absolute;
  left: 5px;
  top: 50px;
}

Elsewhere this probably help you:http://www.w3schools.com/tags/tag_legend.asp

Arthur Corenzan · Answer 3 · 2014-02-15T02:01:00.620

You can't write something on top of a border - technically yes, but for all purposes here, no, you can't.

So if you want a text on top a short dark background you write something like that:

In yo HTML:

<div>My suppa text</div>

In yo CSS:

div {
  background: #26282B;
  color: #fff;
}

<div> here being the first element inside your <body> it still would have a margin before it, that's because of the browser default style.

You can get rid of it by doing that, in yo CSS:

html, body {
  margin-top: 0;
  padding-top: 0;
}

Now I would suggest you to read about CSS resets.

score 0 · Answer 4 · edited Mar 23 '21 at 02:39

0

How about this:

<!DOCTYPE html>
<html>

<head>
  <style>
    #container {
      border: 10px solid;
      padding: 5px;
    }
    
    #title {
      float: left;
      padding: 0 5px;
      margin: -20px 0 0 30px;
      background: #fff;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="title">Border title</div>
    <p>Some content...</p>
  </div>
</body>

</html>

edited Mar 23 '21 at 02:39

nircraft

8,242
5
30
46

answered Feb 15 '14 at 02:02

user2845946

1,755
29
38

score 0 · Answer 5 · edited Feb 05 '21 at 13:50

0

Yes, you can.

Add this to your style:

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;

edited Feb 05 '21 at 13:50

General Grievance

4,555
31
31
45

answered Feb 05 '21 at 13:30

Rober

1

Putting text on a border with css?

5 Answers5