CSS Borders
A border is a line drawn around an element, between its padding and its margin.
Border Style
A border needs a style, or it will not show at all. Common values:
| Value | Looks like |
|---|---|
solid | One plain line |
dashed | Short dashes |
dotted | Dots |
double | Two lines |
none | No border |
Example
<!DOCTYPE html>
<html>
<head>
<style>
p { padding: 8px; }
.a { border-style: solid; }
.b { border-style: dashed; }
.c { border-style: dotted; }
.d { border-style: double; border-width: 4px; }
</style>
</head>
<body>
<p class="a">solid</p>
<p class="b">dashed</p>
<p class="c">dotted</p>
<p class="d">double</p>
</body>
</html>Width and Colour
border-widthsets the thickness, such as1px,3pxorthinborder-colorsets the colour
Example
.box {
border-style: solid;
border-width: 2px;
border-color: #264de4;
}The Border Shorthand
Most of the time, developers write all three in one line with border: width, style, colour.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.receipt {
border: 2px dashed #555555;
padding: 15px;
width: 250px;
}
.total {
border-top: 1px solid black;
padding-top: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="receipt">
<p>Shan Biryani masala: Rs 180</p>
<p>Rice 1 kg: Rs 420</p>
<p class="total">Total: Rs 600</p>
</div>
</body>
</html>Borders on One Side
You can style each side on its own with border-top, border-right, border-bottom and border-left. In the example above, only the total has a line on top.
A thick left border is a popular way to highlight a note:
Example
.note {
border-left: 5px solid orange;
padding-left: 10px;
}Rounded Corners
border-radius rounds the corners. It works even if the element has no border, which is useful for buttons and cards.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: #264de4;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
}
.pill { border-radius: 999px; }
.avatar {
width: 80px;
height: 80px;
background-color: teal;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="btn">Rounded</button>
<button class="btn pill">Pill shape</button>
<div class="avatar"></div>
</body>
</html>border-radius: 50% on a square makes a perfect circle.
Outline
An outline looks like a border but is drawn outside the element and does not take up space. Browsers use it to show which input or link has keyboard focus.
Do not remove the focus outline (outline: none) without adding another clear focus style. People who use a keyboard instead of a mouse need it to see where they are.
Exercise
Exercise
Which declaration draws a 3 pixel solid red border?