CSS Tutorial: Make Amazing Border For Web Design

Hello, guys in this post we will learn about border property, if you bored with simple text and paragraphs representation then we get some amazing borders to decorate our text headlines and paragraphs with these cool border properties.

The border property gives you the opportunity to play with your HTML resource. You will give some awesome looks by using this border property in your CSS document.

Border:

We use the border property to apply various styles and colors to an element’s border. Let’s have a look at the following code to understand it better

I’m using Notepad++ this is an amazing editor for designing web pages and editing documents.

Guy’s we are going to make HTML File then we do CSS. So let’s start this:-

HTML Code:

<html>
	<head>
		<title> Border in CSS </title>
		<link rel="stylesheet" type ="text/css" 
		href ="main.css">
	</head>
	
	<body>
		<br> <br> <br>
		<p> Developers Nation </p>
		<h4> Developers Nation </h4>
		<h5> Developers Nation </h5>
	</body>
</html>

This is our HTML code here we are using 4 different tags which are the following:

p which is paragraph tag (use for making paragraphs)
h4 this is heading tag (this is used for making smaller headings)
h5 this is also a heading tag (it’s 2nd smallest heading in HTML)
br its use to make line brack (this tag does not contain a closing tag)

If you want to learn more about HTML see our HTML tutorial. As we know you have to save this file in .html format. If you don’t do it this will not work. Now let’s make CSS code:-

CSS Code:

p {
	border-style: dashed;
	border-width: 2px;
	border-color: blue;
	border-radius: 25px;
	display: inline;
	margin: 25px;
	padding: 15px;
}
h4 {
	border-style: dotted;
	border-width: 2px;
	border-color: pink;
	border-radius: 25px;
	display: inline;
	margin: 25px;
	padding: 15px;
}
h5 {
	border-style: ridge;
	border-width: 2px;
	border-color: red;
	border-radius: 25px;
	display: inline;
	margin: 25px;
	padding: 15px;
}

So, friends, this is our CSS code which styles our HTML code. Here we are using border-style: dashed; with p tag, dotted with h4, and ridge with h5 tag. The border-width & border-radius is 2px and 25px. we are using different colors for every tag like blue, pink & red.

The output of the code would be as follows:

If we observe the previous code and the subsequent output, we can see that the border has a dotted pattern. We can also use solid or dashed values to define a border-style. The border-width property can set the width of the border. The border-radius property is a CSS3 property and defines the curvature of the border.

The border-color helps us to assign a color to the border. In the previous code, we have used a dotted border of pink color with a border width of 2 pixels and a border-radius of 25 pixels. In the previous code, we have used the margin and padding properties, which will be explained in the next section.

So, try this code with yourself open your Notepad++ editor, and play with this code. You will find all CSS code op our every post here.