Home Python Java JavaScript HTML SQL PHP C#
← prev next →
Advertisement
CSS Border
CSS border is a key property used to characterize and style the borders around HTML
components. Borders assume a vital part in website composition, assisting with making
separation, emphasis, and stylish allure. In CSS, you can utilize a few border-related
properties to control the style, variety, size, and shape of these borders. In this article, we will
investigate these CSS border properties and how to really utilize them.
CSS Border Properties
The CSS border properties are utilized to determine the style, variety, width, and ebb and
flow of the borders of a component. These properties include:
border-style
border-color
border-width
border-radius
1) CSS border-style
The Border style property is used to specify the border type which you want to display on
the web page.
There are some border style values which are used with border-style property to define a
border.
Ad ti t
Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders wIth the same
border-width value.
groove It defines a 3d grooved border. effect is
generated according to border-color
value.
ridge It defines a 3d ridged border. effect is
generated according to border-color
value.
inset It defines a 3d inset border. effect is
generated according to border-color
value.
outset It defines a 3d outset border. effect is
generated according to border-color
value.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.border-example {
width: 150px;
height: 30px;
margin: 10px;
padding: 10px;
}
.dotted {
border: 2px dotted #FFA500;
}
.dashed {
border: 2px dashed #008000;
}
.solid {
border: 2px solid #000;
}
.double {
border: 4px double #FF0000;
}
.groove {
border: 3px groove #3333FF;
}
.ridge {
border: 3px ridge #660066;
}
.inset {
border: 3px inset #006600;
}
.outset {
border: 3px outset #990000;
}
</style>
</head>
<body>
<div class = "border-example dotted"> Dotted Border </div>
<div class = "border-example dashed"> Dashed Border </div>
<div class = "border-example solid"> Solid Border </div>
<div class = "border-example double"> Double Border </div>
<div class = "border-example groove"> Groove Border </div>
<div class = "border-example ridge"> Ridge Border </div>
<div class "border-example inset"> Inset Border </div>
<div class = "border-example outset"> Outset Border </div>
</body>
</html>
Output:
2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also
use the one of the three pre-defined values, thin, medium or thick to set the width of the
border.
Note: The border-width property isn't utilized alone. It is constantly utilized with other
border properties like "border-style" property to set the border first any other way it won't
work.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for different border widths */
.thin-border {
border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */
}
.medium-border {
border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */
}
.thick-border {
border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */
}
.custom-border {
border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */
}
</style>
</head>
<body>
<!-- HTML elements with different border widths -->
<p class = "thin-border"> Thin Border </p>
<p class = "medium-border"> Medium Border </p>
<p class = "thick-border"> Thick Border </p>
<div class = "custom-border"> Custom Border </div>
</body>
</html>
Output:
3) CSS border-color
There are three strategies to set the color of the border.
Name: It determines the color name. For instance: "red".
RGB: It determines the RGB worth of the color. For instance: "rgb(255,0,0)".
Hex: It determines the hex worth of the color. For instance: "#ff0000".
Note: The border-color property isn't utilized alone. It is constantly utilized with other
border properties like "border-style" property to set the border first any other way it won't
work.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.my-element {
width: 200px;
height: 100px;
border: 2px solid #333; /* The Initial border color is dark gray */
transition: border-color 0.5s; /* Adding a smooth transition effect */
}
.my-element:hover {
border-color: blue; /* This changes the border color to blue when hovering */
}
</style>
</head>
<body>
<div class = "my-element"> Hover </div>
</body>
</html>
Output:
Next Topic CSS border-radius property
← prev next →
