How to set specific border

I want to set border just below my name…
I tried many times but i can not done…

at first I set border-bottom: 2px solid red; after that I saw the border full width .
How to set specific border bottom please help me…
and sorry for my english is not good…

I would be more than happy to help you. Code copy paste your html and css code so I would be able to explain clearly.

However to get the border-bottom : 2px solid red below your name. You have to apply border-bottom property on the container of your name only.

1 Like

this is html code

css code

Welcome, arnab.

For future posts, please paste your actual code, and not a screenshot of code (this is incredibly difficult to work with). To paste your code, use MarkDown syntax, as shown here: Forum Code Formatting

The more information you give us, the better we can help you.

1 Like

Please do not post a screenshot, people don’t want to retype your whole code just to help you. Please post a live version (for example on or codepen) or your whole code so it is just a matter of copy pasting.

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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


1 Like

You could, underneath your “FrontEnd developer” element add this:


I hope this helps

**Thank you for your valuable comment **

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  margin: 0;
  padding: 0;
/* home section */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #43b900;
nav li {
  float: left;
nav li a {
  color: white;
  display: block;
  text-decoration: none;
  padding: 15px 17px;

.heading  {
  background-image: url("../image/header.jpg");
  width: 100%;
  height: 520px;
  background-size: cover;


/* about section */
.mypic {
  margin-top: 75px;


.mypic img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 4px solid #0f3e8a;

.mypic h3 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;

.mypic h4 {
  text-align: center;


      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>

    <div class="mypic">
      <img src="me.jpg" alt="author photo">
      <h3>Arnab chakma</h3>
      <h4>FrontEnd developer</h4>


For future posts, remember that you can create a CodePen to share your HTML, CSS, and JavaScript with us. This means you will share a link with your code, and if you update it, we can see the changes.

Also, you could add this to your CSS:

.mypic {
  border-bottom: 2px solid red;
1 Like

Thank you for help… solve it…
I used code

.mypic h4 {
  width: 320px;
  text-align: center;
  border-bottom: 5px solid #575b57;
  margin-left: auto;
  margin-right: auto;