CSS Borders
Borders in CSS allow you to create a line around HTML elements, which can be customized in various ways. You can define the border’s width, style, and color to enhance the appearance of elements on your webpage.
Basic Properties for CSS Borders:
1. Border Style
The border-style property defines the style of the border. It can be one of the following values:
• none: No border at all, similar to hidden but without reserving space for the border.
• solid: A single solid line.
• dotted: A series of small round dots.
• dashed: A series of short dashes.
• double: Two solid lines. The space between them is equal to the width of the border.
• groove: Appears as if it’s carved into the page, giving a 3D effect. The shading depends on the border color.
• ridge: The opposite of groove, it looks like it’s coming out of the page, also with a 3D effect.
• inset: Gives the appearance of the content being pushed into the screen, creating a sunken look.
• outset: The reverse of inset, it makes the element appear to be popping out.
Example:
Output:
In this example:
border-style: solid;: This CSS property sets the border style of the <div> to solid. A solid border is an unbroken line surrounding the element.
2. Border Width
The border-width property specifies the width of the border. It can take values in pixels (px), ems (em), or other length units.
Example:
<html>
<head>
<style>
div {
border-width: 8px;
border-style: solid;
}
</style>
</head>
<body>
<div>A div with a solid border style and 8px border all around.</div>
</body>
</html>
Output:
In this example:
• border-width: 8px;: Sets the width of the border to 8 pixels on all sides of the <div>.
• border-style: solid;: Applies a solid line as the border style around the <div>.
• <div>: “A div with a solid border style and 8px border all around.”
3. Border Color
The border-color property sets the color of the border. It can be a color name, hex code, RGB value, or HSL value.
Example:
<html>
<head>
<style>
div {
border-width: 8px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<div>A div with a solid border style and 8px blue color border all around.</div>
</body>
</html>
Output:
In this example:
• border-width: 8px;: Sets the width of the border to 8 pixels on all sides of the <div>.
• border-style: solid;: Applies a solid line as the border style around the <div>.
• <div>: “A div with a solid border style and 8px border all around.”
4. Border Shorthand Property
The border shorthand property can be used to set all three border properties (width, style, and color) in one line.
Example:
<html>
<head>
<style>
div {
border: 2px solid red;
}
</style>
</head>
<body>
<div>A div with a solid border style and 2px blue color border all around.</div>
</body>
</html>
Output:
In this example:
• border: 2px solid red;: This shorthand property sets the border of the <div> with the following values:
• 2px: The width of the border is 2 pixels.
• solid: The border style is solid, meaning it is a continuous, unbroken line.
• red: The color of the border is red.
• Due to the applied CSS rule, this <div> will have a border that is 2 pixels wide, solid, and red in color.
5. Individual Border Sides
CSS allows you to set borders for each side of an element individually using the following properties:
• border-top
• border-right
• border-bottom
• border-left
Example:
<html>
<head>
<style>
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px double yellow;
}
</style>
</head>
<body>
<div>A div with a different border style and colors</div>
</body>
</html>
Output:
In this example:
Due to the applied CSS rules, the <div> will have:
• A 2-pixel-wide solid red border on the top.
• A 3-pixel-wide dashed green border on the right.
• A 4-pixel-wide dotted blue border on the bottom.
• A 5-pixel-wide double yellow border on the left.
6. Border Radius
The border-radius property allows you to create rounded corners on borders. You can specify one value to round all corners equally, or four values for each corner.
Example:
<html>
<head>
<style>
div {
border: 2px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<div>A div with rounded corners</div>
</body>
</html>
Output:
In this example:
• border: 2px solid black;: Sets 2-pixel-wide solid black border .
• border-radius: 10px;: Rounds the corners of the border with a radius of 10 pixels. This creates a smooth curve on the corners of the <div>.
Example with different values:
<html>
<head>
<style>
div {
border: 2px solid black;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>A div with rounded corners</div>
</body>
</html>
Output:
In this example:
1. border: 2px solid black;: Sets 2-pixel-wide solid black border .
2. border-radius: 10px 20px 30px 40px;: This property sets different radii for each corner of the border, creating a custom rounded effect:
• 10px: Radius for the top-left corner.
• 20px: Radius for the top-right corner.
• 30px: Radius for the bottom-right corner.
• 40px: Radius for the bottom-left corner.
Conclusion
CSS borders are a simple yet powerful way to style the elements on your web page. By adjusting the width, style, color, and radius, you can create various border effects to make your content stand out. Whether you’re creating buttons, boxes, or other elements, understanding how to use CSS borders will help you design more appealing web pages.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Border
Objective: Add a basic border to a div element.
Expected Output: A div element with a solid black border.
Output:
Scenario 2: Border Radius
Objective: Add rounded corners to a div element.
Expected Output: A div element with rounded corners.
Output:
Scenario 3: Border Styles
Objective: Apply different border styles to different elements.
Expected Output: Three div elements with different border styles: solid, dashed, and dotted.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 5px;
}
.solid-border {
border: 3px solid black;
padding: 10px;
}
.dashed-border {
border: 3px dashed red;
padding: 10px;
}
.dotted-border {
border: 3px dotted blue;
padding: 10px;
}
</style>
</head>
<body>
<div class=”solid-border”>
<p>This is a div with a solid border.</p>
</div>
<div class=”dashed-border”>
<p>This is a div with a dashed border.</p>
</div>
<div class=”dotted-border”>
<p>This is a div with a dotted border.</p>
</div>
</body>
</html>
Scenario 4: Border Width and Color
Objective: Set different border widths and colors for different sides of an element.
Expected Output: A div element with varying border widths and colors on each side.
Output:
Scenario 5: Border Shorthand
Objective: Use the shorthand property to set all border properties at once.
Expected Output: A div element with a border that has width, style, and color set in a single line.
Output:
Scenario 6: Border Box Sizing
Objective: Ensure that padding and border are included in the element’s total width and height.
Expected Output: A div element that adjusts its size to include padding and border within the specified width and height.
Output:
