CSS
Topperworld.in
Border
• CSS border properties allow us to set the style, color, and width of the
border.
Note: Different properties can be set for all the different borders i.e.top
border, right border, bottom border, and left border.
❖ Properties of CSS Borders:
1. border-style
2. border-color
3. border-width
4. 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.
Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
©Topperworld
CSS
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:
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>Topper World </p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>
©Topperworld
CSS
Output:
2.Border - color property
• The border-color property is used to add color to the border of an element.
• The border-color property will only work when the border-style property is
defined first, which is used to set the borders. This property will not work
alone.
• This can take one to four values for the top border, right border, bottom
border, and left border respectively.
• If this property is not set then it inherits the color of the element.
Syntax:
border-color: color-value;
Default Value : The current color of the element
Property values: Where color-value can be any of the following:
) name: It specifies a color name, like “blue”.
©Topperworld
CSS
) Hex: It specifies a hex value, like “#0000ff”.
) RGB: It specifies a RGB value, like “rgb(0, 0, 255)”.
) transparent: It sets the border color of the corresponding element to
transparent.
The border-color property can be used to set individually using the following
properties:
⚫ CSS border-left-color Property: It is used to set the color of the
left-border in an Element.
⚫ CSS border-top-color Property: It can provide an option to fill
different color from parent border-color to top border of the container.
⚫ CSS border-right-color Property: It is used to set the color of the
right-border in an Element.
⚫ CSS border-bottom-color Property: It is used to set the color of
the bottom border of an element.
⚫ CSS border-block-color Property: It sed to set the individual logical
block border-color property values in a single place in the style sheet.
⚫ CSS border-inline-color Property: It is used to set the individual
logical inline border-color property values in a single place in the style
sheet.
Example:
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-style: solid;
border-color: red
}
</style>
</head>
<body>
<p>
Topper World
</p>
<p>
Border properties:color
</p>
</body>
</html>
©Topperworld
CSS
Output:
3. CSS Border Width
The border-width property in CSS is used to set the border width of all four
sides of an element.
The border-width property is the combination of four property.
Default Value: medium
Syntax:
border-width: length|thin|medium|thick|initial|inherit
Property Values:
• length: It is used to set the width of the border. It does not take a negative
value.
• thin: It is used to set the thin border at the top of the element.
• medium: It is used to set a medium-sized top border. It is the default value.
• thick: It is used to set the thick top border.
• initial: It is used to set the border-top-width to its default value.
• inherit: This property is inherited from its parent
Example :
This example set border-width to a single value to all sides.
border-width: val;
➢ border-top-width: val;
➢ border-right-width: val;
➢ border-bottom-width: val;
➢ border-left-width: val;
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>
border-width property
</title>
<style>
div {
margin-bottom: 10px;
border-style: solid; }
</style>
</head>
<body>
<h1 style="color: green">
Topper World </h1>
<p>border-width property: [value]</p>
<div style="border-width: 10px">
This div has a border around it of 10px. </div>
<div style="border-width: thin">
This div has a thin border. </div>
<div style="border-width: medium">
This div has a medium border. </div>
<div style="border-width: thick">
This div has a thick border. </div>
</body>
</html>
©Topperworld
CSS
Output:
4.CSS Border radius property
It is used to round the corner of the border that looks more attractive.
This CSS property includes the properties that are tabulated as follows:
Property Description
border-top-left-radius It is used to set the border-radius for the top-left
corner
border-top-right-radius It is used to set the border-radius for the top-right
corner
border-bottom-right- It is used to set the border-radius for the bottom-
radius right corner
border-bottom-left- It is used to set the border-radius for the bottom-left
radius corner
➢ Let's see what happens when we provide a single value, two values, three
values, and four values to this property.If we provide a single value (such
as border-radius: 30px;) to this property, it will set all corners to the same
value.
©Topperworld
CSS
➢ When we specify two values (such as border-radius: 20% 10% ;), then the
first value will be used for the top-left and bottom-right corners, and the
second value will be used for the top-right and bottom-left corners.
➢ When we use three values (such as border-radius: 10% 30% 20%;) then the
first value will be used for the top-left corner, the second value will be
applied on top-right, and bottom-left corners and the third value will be
applied to the bottom-right corner.
➢ Similarly, when this property has four values (border-radius: 10% 30% 20%
40%;) then the first value will be the radius of top-left, the second value will
be used for the top-right, the third value will be applied on bottom-right, and
the fourth value is used for bottom-left.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>Topper World</h1>
</body>
</html>
©Topperworld
CSS
Output:
©Topperworld
