Scribd
Upload
0 views

CSS Border - Javatpoint

The document provides an overview of CSS border properties, including border-style, border-width, and border-color, essential for styling HTML components. It details various border styles such as dotted, dashed, solid, and more, along with examples of how to implement these styles in HTML and CSS. Additionally, it explains how to set border width and color using different methods, emphasizing the importance of combining these properties for effective styling.

Uploaded by

shubham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

CSS Border - Javatpoint

The document provides an overview of CSS border properties, including border-style, border-width, and border-color, essential for styling HTML components. It details various border styles such as dotted, dashed, solid, and more, along with examples of how to implement these styles in HTML and CSS. Additionally, it explains how to set border width and color using different methods, emphasizing the importance of combining these properties for effective styling.

Uploaded by

shubham
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8


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 →

You might also like