Home 〉 CSS Tutorials 〉 CSS Border Property Explained with Easy Examples for Beginners

CSS Border Property Explained with Easy Examples for Beginners !

CSS Border Property Explained with Easy Examples for Beginners !

Looking to add borders to your HTML elements? The CSS `border` property allows you to define the width, style, and color of borders around elements. This tutorial covers various border styles like solid, dashed, and dotted, and shows how to apply them effectively. You'll also learn about shorthand notation for setting all border properties in one line. Enhance your webpage aesthetics by mastering borders. Read the complete tutorial on CSS Border Property Explained

CSS Border Property - Complete Guide with Examples

The CSS 'border' property is used to add borders around elements. You can customize the style, width, and color of the border.

Let's go step by step to understand how to use it effectively.

Basic Syntax

Syntax ✍

selector {
border: border-width border-style border-color;
}

You can also set each property separately:

  • 'border-width'
  • 'border-style'

Common Border Styles

Here are the most used border styles:

  • solid : A solid line
  • dashed : A dashed line
  • dotted : A dotted line
  • double : Two lines
  • groove : 3D grooved border
  • ridge : 3D ridged border
  • inset : Looks embedded
  • outset : Looks raised
  • none : No border
  • hidden : Same as 'none'

Examples of CSS Border Property

Simple Solid Border

html code 📝

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

.box1 {
border: 2px solid black;
padding: 10px;
}

</style>
</head>
<body>

<div class="box1">This is a solid black border</div>

</body>
</html>

output 📌

This is a solid black border
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: Adds a 2px solid black border around the element.

Different Border Widths and Colors

html code 📝

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

.box2 {
border-width: 4px;
border-style: dashed;
border-color: red;
padding: 10px;
}

</style>
</head>
<body>

<div class="box2">Dashed red border with 4px width</div>

</body>
</html>

output 📌

Dashed red border with 4px width
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: You can customize each border property separately.

Border for Each Side

html code 📝

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

.box3 {
border-top: 3px solid green;
border-right: 2px dashed blue;
border-bottom: 4px double orange;
border-left: 1px dotted red;
padding: 10px;
}

</style>
</head>
<body>

<div class="box3">Different borders on each side</div>

</body>
</html>

output 📌

Different borders on each side
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: You can set borders individually for top, right, bottom, and left.

Border Radius with Border

html code 📝

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

.box4 {
border: 3px solid purple;
border-radius: 10px;
padding: 10px;
}

</style>
</head>
<body>

<div class="box4">Rounded border with radius</div>

</body>
</html>

output 📌

Rounded border with radius
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: 'border-radius' makes the corners round.

Shorthand Border Property

html code 📝

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

.box5 {
border: 5px dotted teal;
padding: 10px;
}

</style>
</head>
<body>

<div class="box5">Using shorthand for all border properties</div>

</body>
</html>

output 📌

Using shorthand for all border properties
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: Sets width, style, and color in one line.

Related Topics

  • 'border-radius': Makes corners rounded.
  • 'outline': Adds a border-like line outside the element box.
  • 'box-shadow': Adds shadow instead of a visible border.

Conclusion

The CSS 'border' property helps you create clear boundaries around elements. You can use solid lines, dotted styles, and even rounded borders to improve your layout. Play with different styles, widths, and colors to see how they affect your design.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is the default border in CSS?

By default, elements have no border ('border: none').

Can I use different borders on each side?

Yes! Use 'border-top', 'border-right', 'border-bottom', and 'border-left'.

What's the difference between border and outline?

'border' is part of the box model. 'outline' is outside the element and doesn't affect layout.

How to make a rounded border?

Use 'border-radius'. For example, 'border-radius: 10px;'.

Can I use hex codes or RGB for border color?

Yes! Any valid CSS color value can be used.

Previous Post Next Post