The CSS Box Model
Borders
The border-style property specifies the type of border that will be displayed. Valid options for the border-style are:-
👉border-style:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- inherit
👉border-width:
The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used.
b { border-width : 2px; border-style : dashed; }
👉border-color:
The border-color is used to set the color for a border.
b { border-color : blue; }
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Borders </title>
<style>
.borderCSS {
border-style: solid;
border-width: 2px;
border-color: blue;
}
/* or .borderCSS{ 2px solid blue; } */
</style>
<body>
<div class = "borderCSS"> This is a box with borders </div>
</body>
</html>
Margins and Padding
In the box model, there are two ways to control whitespace around a box. Padding is a whitespace inside the border, and the margin is the whitespace outside the border, separating the box from surrounding elements.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Borders </title>
<style>
.outer {
border: 2px solid black;
background-color: blue;
margin: 15px;
padding: 15px;
}
.inner {
border: 2px dashed maroon;
background-color: yellow;
margin: 15px;
padding: 15px;
}
body {
border: 3px solid red;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1> CSS Box-Model Property </h1>
<div class = "outer">
The Computer
<div class = "inner">
The computer is undoubtedly one of the greatest discoveries of modern science and technology. The credit of inventing this wonderful instrument goes to the British scientist Charles Babbage. The computer is nothing but a kind a small machine with help of which different work can be done easily and accurately within a very short time.
</div>
</div>
</body>
</html>
NOTES.....
Most of the styles alter the border appearance, but none and inherit are special. Setting the border style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.