How to make borders with CSS
Hey everyone, today I shall walk you through how to make some pretty beginner borders in html using css styling.
First off go ahead and make a html document and name it whatever you want!
Now I will be giving you a code to paste into your html document,
- Code:
-
<html>
<head>
<title>Border</title>
<style>
.class{
border: 2px red solid;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="border">
My border
</div>
</body>
</html>
Now that you have copied and pasted that into your html document, save it as (anyname).html and open it in a web browser and you should confronted with a square like border.
How to edit this border? To edit this border's size you may change these 2 values in your html document, "Width:100px;" and "Height:100px;"
- Code:
-
.class{
border: 2px red solid; /* <<<<CHANGE THE COLOR AND STYLE<<<<</*
width:100px; /* <<<<<<<<<<CHANGE THAT<<<<<<<<<<<<<<<*/
height:100px; /* <<<<<<<<<<< AND THAT<<<<<<<<<<<*/
}
Explanation of things: - Code:
-
border: 2px red solid;
This inidcates how big the border is (2px) the border color (red) and the border style (solid).
- Code:
-
width:100px;
height:100px;
This indicates the width(100px) and the height(100px) of the border.
I will post later on more border style's for you guys to play around with and use.
If you cannot find the color you want use: Click here !!!
Please post below if you have any questions for would like more detail on certain parts.
Home 
