CSS borders define the line that surrounds an element’s content and padding. They control style, width, and color, and can be customized in many ways.
-
solid
-
dashed
-
dotted
-
double
-
groove
-
ridge
-
inset
-
outset
-
none
-
hidden
Example:
<style>
.box1 {
border-style: solid;
}
.box2 {
border-style: dashed;
}
.box3 {
border-style: dotted;
}
.box4 {
border-style: double;
}
.box5 {
border-style: groove;
}
.box6 {
border-style: ridge;
}
.box7 {
border-style: inset;
}
.box8 {
border-style: outset;
}
.box9 {
border-style: none;
}
.box10 {
border-style: hidden;
}
</style>
<span class="box1">solid</span>
<span class="box2">dashed</span>
<span class="box3">dotted</span>
<span class="box4">double</span>
<span class="box5">groove</span>
<span class="box6">ridge</span>
<span class="box7">inset</span>
<span class="box8">outset</span>
<span class="box9">none</span>
<span class="box10">hidden</span>
Output:
solid
dashed
dotted
double
groove
ridge
inset
outset
none
hidden
2. border-width
Controls the thickness of the border.
Values:
-
Keywords: thin, medium, thick
-
Or specific sizes: 2px, 0.5rem
Example:
box {
border-width: 2px;
}
3.border-color
Sets the border color.
box {
border-style: solid;
border-color: red;
}
<p class="box">The border color is red</p>
Output:
🎯 Border Shorthand:
You can combine all three into one property:
box {
border: 3px solid red;
}
Order doesn’t matter, but a common pattern is:
border: width style color;
🎛 Side-specific Borders:
You can style each side independently:
Example:
box{
border-top: 5px solid red;
border-right: 3px dotted blue;
border-bottom: 5px dashed yellow;
border-left: none;
}
<p>Example of multiple borders.</p>
Output:
Example of multiple borders.
🌐 Border Radius (rounded corners):
border-radius in CSS controls how rounded an element’s corners are. You can round one corner, all corners, or even create circles and ovals.
⭐ Basic Usage:
Round all corners equally:
.box {
border-radius: 10px;
}
Output:
Different radii for each corner:
Order goes top-left → top-right → bottom-right → bottom-left:
.box {
border-radius: 10px 20px 30px 40px;
}
Output:
Different radii for each corner
Circle Using border-radius:
A circle requires equal width and height and border-radius: 50%.
.circle {
width: 100px; /* Equal width and height */
height: 100px;
background-color: teal;
border-radius: 50%; /* Makes it perfectly round */
}
<p class="circle"></p>
Output:
Explanation:
-
border-radius: 50% turns a square into a circle.
-
The element must be a square. If width ≠ height, it becomes an oval.
Elliptical Corners:
You can create an ellipse shape for corners using two values per corner:
.ellipse {
width: 200px; /* Horizontal size */
height: 100px; /* Vertical size */
background-color: teal;
border-radius: 50%; /* Turns rectangle into ellipse */
}
<div class=""ellipse"><div>
Output:
Explanation:
-
border-radius: 50% makes the element fully rounded.
-
Since width ≠ height, the circle becomes an ellipse.
Creating Triangle:
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* Left side transparent */
border-right: 50px solid transparent; /* Right side transparent */
border-bottom: 100px solid teal; /* Bottom side colored */
}
</style>
<p class="triangle"></p>
Output:
Explanation:
-
The element has no width/height itself (0), so the borders form the shape.
-
border-left and border-right are transparent to shape the triangle.
-
border-bottom is the visible triangle color.
Upward and Downward Triangles:
-
Pointing Up: Color the bottom border.
-
Pointing Down: Color the top border.
-
Pointing Left: Color the right border.
-
Pointing right: Color the left border.
Equilateral triangle:
To make a triangle where all sides are equal:
<style>
.equilateral-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid purple; /* 100 * √3 / 2 */
}
</style>
<p class="equilateral-triangle"></p>
Output:
Note: The height of an equilateral triangle =
(side x √3/2 )
