CSS Borders
CSS borders are used to define the edges of HTML elements, and they can be customized in various ways. Here’s a breakdown of the main properties and some examples:
Basic Border Properties
CSS provides several properties to control the appearance of borders around HTML elements.
1. border Property
The border property is a shorthand property that lets you define the border width, style, and color in a single line.
.box {
border: 2px solid black; /* 2px width, solid style, black color */
}
2. border-width Property
The border-width property specifies the thickness of the border. It accepts predefined values such as thin, medium, and thick, or custom length values like pixels.
.box {
border-width: 5px; /* Sets border width to 5 pixels */
}
3. border-style Property
The border-style property determines how the border is displayed.
Common Border Styles
soliddotteddasheddoublegrooveridgeinsetoutsetnone
.box {
border-style: dashed; /* Border is dashed */
}
4. border-color Property
The border-color property specifies the color of the border. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA values.
.box {
border-color: red; /* Sets border color to red */
}
Complete Border Example
Here's a complete example that combines the different border properties.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border-width: 3px;
border-style: solid;
border-color: blue;
padding: 20px;
margin: 20px;
}
.dashed-box {
border-width: 5px;
border-style: dashed;
border-color: green;
}
.dotted-box {
border: 4px dotted red;
}
</style>
</head>
<body>
<div class="box">Solid Blue Border</div>
<div class="dashed-box">Dashed Green Border</div>
<div class="dotted-box">Dotted Red Border</div>
</body>
</html>
Border Radius
The border-radius property is used to create rounded corners for HTML elements.
Example
.rounded-box {
border: 2px solid black;
border-radius: 10px; /* Rounds the corners with a 10px radius */
}
Border Shorthand Property
The shorthand border property combines border-width, border-style, and border-color into a single declaration.
Example
.box {
border: 1px solid black; /* 1px width, solid style, black color */
}
This shorthand allows you to set border-width, border-style, and border-color in one line.
Example with Different Border Radius
The following example demonstrates how to create rounded corners and circular elements using the border-radius property.
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-box {
border: 3px solid blue;
border-radius: 15px; /* More rounded corners */
padding: 20px;
margin: 20px;
}
.circle-box {
border: 2px solid red;
border-radius: 50%; /* Makes the box circular */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="rounded-box">Rounded Corners</div>
<div class="circle-box"></div> <!-- Circular Box -->
</body>
</html>
Explanation
Using the border Property
The border shorthand is the easiest way to define a complete border by specifying its width, style, and color in one declaration.
Using Individual Border Properties
If you need greater control, you can define border-width, border-style, and border-color separately.
Creating Rounded Corners
The border-radius property softens the corners of an element, making the design look modern and visually appealing.
Creating Circular Elements
When an element has equal width and height, setting border-radius: 50%; transforms it into a perfect circle.
Summary
- Use the
bordershorthand to define width, style, and color together. - Use
border-widthto control border thickness. - Use
border-styleto choose styles like solid, dotted, dashed, or double. - Use
border-colorto customize the border color. - Use
border-radiusto create rounded corners or circles.
This example demonstrates the border-radius property to create different border shapes, including circular borders.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.