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.
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.
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 repl.it 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.
You could, underneath your “FrontEnd developer” element add this:
<hr>
I hope this helps
**Thank you for your valuable comment **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>about</title>
<style>
*{
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;
}
</style>
</head>
<body>
<nav>
<ul>
<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>
</ul>
</nav>
<div class="mypic">
<img src="me.jpg" alt="author photo">
<h3>Arnab chakma</h3>
<h4>FrontEnd developer</h4>
</div>
</body>
</html>
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;
}
