CSS Borders

A border surrounds an HTML element. You can control its width, style, color, and shape using different CSS properties.

Main Border Properties

• border-width
• border-style
• border-color
• border-radius
• border-image

div{

    border:2px solid black;

}

The border-width property specifies the thickness of a border.

.box{

    border-style:solid;

    border-width:5px;

}

The border-style property defines the appearance of a border.

.box{

    border-style:dashed;

}

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

.box{

    border-style:solid;

    border-width:3px;

    border-color:blue;

}

Another Example

.card{

    border:2px solid #28a745;

}

The border property combines border width, style, and color into a single declaration.

.box{

    border:4px solid red;

}

Syntax

border: width style color;

Examples

border:2px dashed blue;

border:5px double green;

border:1px solid black;

CSS allows you to apply different borders to each side of an element independently.

.box{

    border-top:4px solid red;

    border-right:4px dashed blue;

    border-bottom:4px double green;

    border-left:4px dotted orange;

}

The border-radius property creates rounded corners on HTML elements.

.box{

    border:2px solid blue;

    border-radius:15px;

}

Circle Example

.circle{

    width:150px;

    height:150px;

    border-radius:50%;

    border:3px solid red;

}

The border-image property allows an image to be used instead of a normal border.

.box{

    border:20px solid transparent;

    border-image:url("border.png") 30 round;

}

Border Image Properties

• border-image-source
• border-image-slice
• border-image-repeat
• border-image-width

Borders and outlines look similar but behave differently.

.box{

    border:2px solid blue;

    outline:3px dashed red;

}

Example 1: Card Border

.card{

    border:1px solid #ddd;

    border-radius:10px;

}

Example 2: Button Border

button{

    border:2px solid green;

    border-radius:5px;

}

Example 3: Profile Image

img{

    border:4px solid blue;

    border-radius:50%;

}

Borders should enhance the appearance of a webpage without making the design look cluttered.

• Use thin borders for a clean and modern design.
• Maintain consistent border styles throughout the website.
• Use border-radius for modern UI elements.
• Choose border colors that match your theme.
• Avoid using too many different border styles.
• Use subtle borders for cards and forms.
• Highlight important sections using thicker borders.
• Test borders on desktop and mobile devices.

❌ Incorrect

.box{

    border-width:5px;

    border-color:red;

}

✔ Correct

.box{

    border:5px solid red;

}

CSS border properties are supported by all modern browsers.

1. What is the purpose of CSS borders?
2. Which property specifies the border style?
3. What is the shorthand property for borders?
4. Name different border styles available in CSS.
5. What does border-radius do?
6. How do you create a circular image using CSS?
7. What is a border image?
8. What is the difference between a border and an outline?
9. Can different borders be applied to each side?
10. Why is border-style important?

In this lesson, you learned:

• ✔ Introduction to CSS Borders.
• ✔ Border Width.
• ✔ Border Style.
• ✔ Border Color.
• ✔ Border Shorthand Property.
• ✔ Individual Borders.
• ✔ Rounded Borders.
• ✔ Border Images.
• ✔ Outline vs Border.
• ✔ Practical Border Examples.
• ✔ Best Practices and Common Mistakes.