CSS Borders

CSS borders are used to define the edges of HTML elements. They allow you to set border width, style, color, radius, and even create fancy effects like gradients and hover transitions.

Border Width

The border-width property is used to control the thickness of an element’s border. You can set the width using specific units like px, em, or pt, or use predefined values such as thin, medium, and thick. It also allows you to define different widths for each side of the border (top, right, bottom, left), giving you more control over the design and appearance of elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-style:solid; 
  border-width: 2px;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Border Style

The border-style property controls how a border appears around an element. Each value creates a different visual effect.

dotted – Displays the border as a series of small dots.
dashed – Shows the border using short line segments.
solid – Creates a continuous single line border.
double – Displays two parallel solid lines.
groove – Produces a carved 3D effect based on the selected border-color.
ridge – Produces a raised 3D effect depending on the border-color.
inset – Makes the element look pressed inward using a 3D style.
outset – Makes the element appear raised outward with a 3D effect.
none – Removes the border completely.
hidden – Hides the border (similar to none in most cases).

Example

<!DOCTYPE html>
<html>
<head>
<style>
.solid {border-style:solid;}
.dotted {border-style:dotted;}
.dashed {border-style:dashed;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
.none {border-style:none;}
.hidden {border-style:hidden;}
</style>
</head>
<body>

<p class="solid">Danish</p>
<p class="dotted">Danish</p>
<p class="dashed">Danish</p>
<p class="double">Danish</p>
<p class="groove">Danish</p>
<p class="ridge">Danish</p>
<p class="inset">Danish</p>
<p class="outset">Danish</p>
<p class="none">Danish</p>
<p class="hidden">Danish</p>

</body>
</html>

Try this code

Border Color

The border-color property sets the color of the border.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.red {border-style:solid;
      border-color:red;}
.green {border-style:dotted;
      border-color:green;}  
</style>
</head>
<body>

<p class="red">This is my first CSS page.</p>
<p class="green">This is my first CSS page.</p>

</body>
</html>

Try this code

Border Shorthand Property

You can set width, style, and color in a single line using the border shorthand property.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border:5px solid red;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Border Radius

The border-radius property allows you to create rounded corners.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border-style:solid;
  border-radius:12px;
}
</style>
</head>
<body>

<div>This is my first CSS page.</div>

</body>
</html>

Try this code

Border Sides

CSS allows you to apply borders to specific sides of an element. You can use border-top, border-right, border-bottom, and border-left to control each side individually.This helps create cleaner and more flexible designs.

Example

<!DOCTYPE html>
<html>
<head>
<style>

p.top {border-top: 3px solid blue;}
p.bottom {border-bottom: 3px solid green;}
p.left {border-left: 4px solid red;}
p.right {border-right: 4px solid purple;}

</style>
</head>
<body>
    
<p class="top"> Top Border</p>
<p class="bottom"> Bottom Border</p>
<p class="left"> Left Border</p>
<p class="right"> Right Border</p>

</body>
</html>

Try this code

Circle Borders

By using border-radius: 50%;, you can make elements perfectly round.

img.avatar {
  border-radius: 50%;
  border: 2px solid #333;
}

Hover Effects on Borders

You can create interactive hover effects using border-color changes and shadows.

div.hover-border {
  border: 2px solid #6c757d;
  transition: all 0.3s ease;
}

div.hover-border:hover {
  border-color: #DC3545;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Gradient Borders

CSS gradients can be applied to borders using border-image.

div.gradient-border {
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(45deg, #FF6B6B, #556270);
  border-radius: 10px;
}

Best Practices for Borders

Use consistent border widths across similar elements
Combine border-radius for modern rounded designs
Use hover effects for interactive elements
Keep colors readable and visually appealing

Common Mistakes with Borders

Overusing thick borders that overwhelm design
Using colors that clash with the background
Neglecting responsiveness for border-radius on small screens

Tip: Use border-radius and border shorthand together for clean and maintainable code.