Write Text Inside Border - CSS

6+ Demo – Write Text Inside Border – CSS/HTML

by

Often we have to put up some text on the border of a box/block for various reasons. In this tutorial we are going to learn how to add text inside the border using CSS.

Let’s start writing code to write the text in your border. We will be writing some HTML in different version along with the CSS to make our page look more attractive.

1. Adding text with Fieldset & Legend (for Forms)

We will be using tag in HTML to accomplish our purpose. The tag is used to group related elements in a form. The tag draws a box around the related elements. This tag also supports global attributes in HTML.

HTML

<fieldset>
	<legend>Login</legend> 
	<table>
		<tr><td>Username</td><td><input type="text"></td></tr>
		<tr><td>Password</td><td><input type="text"></td></tr>
	</table>
</fieldset>

CSS

body{
	font-family: 'Averia Serif Libre';
	margin: auto; 
	margin-top: 25vh;
	width: 320px; height: 320px;
}
input{ border: 1px solid; }
td:first-child{ width: 100px; }

Demo

See the Pen “fieldset” example by Arpit Mittal (@codingiseasy) on CodePen.

2. Adding text with DIV (with Image in BG)

HTML

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

<div class='box'>
  <img src='http://codingiseasy.com/wp-content/uploads/2022/07/Blank-Slide-1.jpg'>
  
  <div class='text'>
    <div>
      <span class='innertext'>Coding Is Easy .com</span>
    </div>
  </div>
</div>

CSS

html {
  background: #ddd;
}

.box {
  width: 400px;
  background: #123;
  margin: 48px auto;
  padding: 16px;
  position: relative;
}

.box > img {
  width: 400px;
  height: 300px;
  opacity: 0.5;
  -o-object-fit: cover;
     object-fit: cover;
}

.box::after {
  content: "";
  display: block;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 47px;
  border: solid 4px white;
  border-bottom: 0;
}

.text {
  color: white;
  position: absolute;
  text-align: center;
  bottom: 40px;
  left: 40px;
  right: 40px;
  white-space: nowrap;
  overflow: hidden;
  font-family: "fjalla one", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text > div {
  width: 2000px;
  margin-left: -820px;
}

.innertext::before,
.innertext::after {
  content: "";
  display: inline-block;
  width: 600px;
  height: 4px;
  background: white;
  vertical-align: middle;
}

.innertext::before {
  margin-right: 16px;
}

.innertext::after {
  margin-left: 16px;
}

Demo

See the Pen Text in a border by Arpit Mittal (@codingiseasy) on CodePen.

3. Adding text with DIV

HTML

<div>
    <h1>CodingIsEasy.com</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS

div {
    height: auto;
    width: auto;
    border: 2px solid black;
    padding: 20px
}

h1 {
    width: max-content;
    margin-top: -30px;
    margin-left: 5px;
    background: white;
}

Demo

See the Pen Write Text in Border with CSS & HTML by Arpit Mittal (@codingiseasy) on CodePen.

4. Write text in border using position absolute property of CSS

HTML

<div class='componentWrapper'>
  <div class="header">
    Coding Tutorials
  </div>
  CodingIsEasy.com
</div>

CSS

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 15px 10px 10px;
  margin: 20px;
  width: cal(100% - 40px);
  position: relative;
}

.componentWrapper .header {
  position: absolute;
  margin-top: -25px;
  margin-left: 10px;
  color: white;
  background: cadetblue;
  border-radius: 10px;
  padding: 2px 10px;
}

Demo

See the Pen Text in Border with DIV & CSS (Position Absolute) by Arpit Mittal (@codingiseasy) on CodePen.

5. Text inside border (Simple)

Demo

See the Pen Text Inside Border – CSS (Simple) by Arpit Mittal (@codingiseasy) on CodePen.

6. Border & Top Text in Border (with transparent text background)

Demo

See the Pen Border & Top Text in Border CSS by Arpit Mittal (@codingiseasy) on CodePen.

You can play around with the CSS code to style the content in your own way. Hope the tutorial was informative one. Hit up the comment section if you have any doubts.

Leave a Comment