The border is an important and attractive function for the styling function and features. We can use different properties and their values to get a perfectly styled property. We can set the other CSS properties to make the border more attractive and display the function systematically.
Border Properties
The border properties are used to create a border around an element. We can set the border on a particular side of the element using sides and display border property. The following properties are used to create a primary border.
- Border-color: we can set the color of the border.
- Border-width: we can set the width of the border.
- Border-style: we can set the style of the border.
- Others: we can set the other CSS properties apart from the border property.
CSS Border-style Property
The border-style is the default and essential property to display border around aby elements. The following points are the value of the border-style property to show the border in different formats. The formats are displayed as solid, dashed, offset, etc.
- Dotted: A dotted border
- dashed: A dashed border
- solid: A solid border
- double: A double border
- groove: A 3D grooved border.
- Ridge: A 3D ridged border.
- Inset: A 3D inset border.
- Outset: A 3D outset border.
- None: A no border style
- hidden: A hidden border.
Syntax
The provided syntax displays the border style applied to the element.
border-style: solid;
Example
The subsequent example demonstrates the border style for various HTML components.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color: Red;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
}
b{
/* Border style */
border-style: outset;
}
</style>
</head>
<body>
<container> Basic Border style property </container>
<h1> How to use and style borders using CSS? </h1>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The output shows the different border styles.
CSS Border Width
We have the option to specify the width using pixels, percentages, or alternative formats to showcase visually appealing components. Each type of border style requires a specific width measurement. The border width must be specified following the border style assignment for the particular element. This attribute is dependent on having a defined border style; otherwise, it will not have any effect on the elements.
Syntax
The given syntax displays the thickness of the border for the specified element.
border-width:5px;
Example
The subsequent illustration demonstrates the fundamental border style and width attributes for various HTML elements.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
border-width:5px;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color: Red;
border-width:4px;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
border-width:7px;
}
b{
/* Border style */
border-style: outset;
border-width:5px;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<container> Basic Border style and width properties </container>
<h1> How to use and style borders using CSS? </h1>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays various border attributes along with their respective styles.
CSS Style Border using Border-color Property
The CSS border style is applied to define the color and thickness of borders. Border color can be specified using color names, RGB values, or hexadecimal colors.
Syntax
The code snippet below displays the color of the border for the specified element.
border-color: grey;
Example
The upcoming demonstration illustrates the fundamental border attributes displaying varied border hues for distinct HTML components.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-style: solid;
border-width:5px;
border-color: grey;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color: Red;
border-width:4px;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
}
h3{
/* Border style */
border-style: double;
border-width:7px;
border-color: grey;
}
b{
/* Border style */
border-style: outset;
border-width:5px;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<container> Basic Border style property with border color </container>
<h1> How to use and style borders using CSS? </h1>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays various border characteristics with distinct colors.
CSS Style Border using the Border Side's Property
The CSS property border is employed to specify the color and thickness of borders. It allows us to define borders individually for different sides like left, right, top, and bottom.
Syntax
The subsequent syntaxes are employed for specifying the border sides and their respective styles.
border-bottom-style : solid;
border-left-style: double;
border-right-style: dotted;
border-top-style: dashed;
Example
The upcoming illustration demonstrates fundamental border attributes with varied border sides for additional HTML components.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-width:5px;
border-color: grey;
padding-left:20px;
padding-right:20px;
border-top-style: dashed;
border-right-style: dotted;
border-left-style: dotted;
}
h1{
margin: auto;
padding: 10px;
color: Red;
border-width:4px;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-bottom-style : solid;
border-top-style : solid;
}
h3{
/* Border style */
border-left-style: double;
border-top-style: double;
border-width:7px;
border-color: grey;
}
b{
/* Border style */
border-right-style: dotted;
border-bottom-style: dotted;
border-width:5px;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border sides </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays various border attributes for different sides.
CSS Style Border using the Border Shorthand Property
The CSS property for styling borders allows us to define borders with different styles, colors, and widths. It is possible to specify the border using shorthand properties that encompass the width, color, and style.
Syntax
The border shorthand employs the following syntaxes to define its various styles.
border: (border-width) (border-style) (border-color);
border: 1px solid orange;
Example
The upcoming instance demonstrates fundamental border attributes showcasing various border widths, styles, and colors for distinct HTML elements.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border shorthand property */
border: 5px groove pink;
padding-left:20px;
padding-right:20px;
}
h1{
margin: auto;
padding: 10px;
color: Red;
margin-top: 20px;
width: fit-content;
/* Border shorthand property */
border: 5px dashed pink;
}
h3{
/* Border shorthand property */
border: 5px dotted pink;
}
b{
/* Border shorthand property */
border: 1px solid black;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border shorthand property </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays distinct border attributes for individual sides.
CSS Style Border using Border-radius Property
CSS style border property is employed to define the border-radius by utilizing the border-radius property.
Syntax
The provided syntax displays the border radius of the element.
border-radius: 18px;
Example
The subsequent instance demonstrates the fundamental border attributes along with a border-radius property.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border shorthand property */
border: 5px groove pink;
padding-left:20px;
padding-right:20px;
/* Border radius property */
border-radius: 18px;
}
h1{
margin: auto;
padding: 10px;
color: Red;
margin-top: 20px;
width: fit-content;
/* Border shorthand property */
border: 5px dashed pink;
/* Border radius property */
border-radius: 15px;
}
h3{
/* Border shorthand property */
border: 5px dotted pink;
/* Border radius property */
border-radius: 25px;
}
b{
/* Border shorthand property */
border: 1px solid black;
width: fit-content;
margin: auto;
padding: 10px;
/* Border radius property */
border-radius: 5px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border-radius property </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays various border attributes along with their radii.
CSS Padding at the Border
The CSS padding attribute creates a distance between the border and the content within an element. If the padding property is not specified, there will be no space between the border and the content of the element.
We have the option to utilize length or percentage values to define the padding property and create spacing. It is essential to use positive values as negative numbers will not generate any visible outcome.
Example
The provided demonstration illustrates the fundamental border attributes along with padding.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
border: 5px groove pink;
/* Border padding property */
padding-left:25px;
padding-right:20px;
border-radius: 18px;
}
h1{
margin: auto;
/* Border padding property */
padding: 5%;
color: Red;
margin-top: 20px;
width: fit-content;
border: 5px dashed pink;
border-radius: 15px;
}
h3{
border: 5px dotted pink;
border-radius: 25px;
/* Border padding property */
padding: 10px 15px;
}
b{
border: 1px solid black;
width: fit-content;
margin: auto;
/* Border padding property */
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border padding property </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result demonstrates various border attributes alongside padding.
Border Shadow of the CSS
A shadow effect can be achieved by combining the CSS box-shadow attribute with the border attribute. The horizontal offset (H-offset) and vertical offset (V-offset) are the two essential parameters for setting the shadow position. Let's elaborate on these:
- H-offset: This numerical value specifies the horizontal distance of the shadow from the box. A positive value places the shadow on the right side, while a negative value positions it on the left side.
- V-offset: This numeric value determines the vertical distance of the shadow from the box. A positive value places the shadow below the box, whereas a negative value positions it above the box.
To adjust the box shadow, insert these four additional parameters following the horizontal and vertical offset values.
To achieve a blurred effect, include a third parameter. The shadow's haziness will increase with a higher numerical value.
Example
The upcoming demonstration illustrates various shadow effects for the solid border type.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
border: 5px groove green;
border-radius: 18px;
}
h1{
margin: auto;
color: Red;
margin-top: 20px;
width: fit-content;
border: 5px dashed red;
border-radius: 15px;
}
.shadow {
border: 2px solid grey;
padding: 10px;
box-shadow: 5px 4px;
}
.blur {
border: 2px solid yellow;
padding: 10px;
box-shadow: 6px 4px 8px orange;
}
.spread1 {
border: 2px solid black;
padding: 10px;
box-shadow: 5px 4px 7px 4px grey;
}
.spread2 {
border: 2px solid;
padding: 10px;
box-shadow: 6px 4px 8px -2px red;
}
.colorshadow {
border: 2px solid blue;
padding: 10px;
box-shadow: 6px 4px navy;
}
.inset {
border: 2px solid lightblue;
padding: 10px;
box-shadow: 6px 4px inset blue;
}
.multiple {
border: 1px solid orange;
padding: 10px;
box-shadow: 5px 5px #00A4BD, 9px 9px #FF7A59, 15px 15px #334758;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border shadow property </container>
<p class="shadow"> C# Tutorial Website: The box shows a shadow.</p>
<p class="blur"> C# Tutorial Website: The box shows a blurred shadow.</p>
<p class="spread1"> C# Tutorial Website: The box shows a shadow with a positive spread radius.</p>
<p class="spread2"> C# Tutorial Website: The box shows a shadow with a negative spread radius.</p>
<p class="color shadow"> C# Tutorial Website: The box shows a shadow with a defined color.</p>
<p class="inset"> C# Tutorial Website: The box shows an inset shadow.</p>
<p class="multiple"> C# Tutorial Website: The box shows multiple shadows.</p>
</body>
</html>
Output
The result displays various border attributes along with padding.
CSS Border Width using the Border Side's Property
CSS utilizes the border style property to specify different widths and colors for borders. It allows for setting borders on specific sides like left, right, top, and bottom as needed.
Syntax
The following syntax is utilized for specifying the border sides and their respective widths.
border-bottom-width: length|thin|medium|thick|initial|inherit;
border-left-width: length|thin|medium|thick|initial|inherit;
border-right-width: length|thin|medium|thick|initial|inherit;
border-top-width: length|thin|medium|thick|initial|inherit;
Example
The upcoming illustration demonstrates how HTML elements exhibit diverse border side widths for different elements.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
/* Border style */
border-color: grey;
padding-left:20px;
padding-right:20px;
border-style: solid;
border-top-width: thick;
border-right-width: length;
border-left-width: length;
}
h1{
margin: auto;
padding: 10px;
color: Red;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-style: dashed;
border-bottom-width: medium;
border-top-width: thick;
}
h3{
/* Border style */
border-left-width: thin;
border-top-width: thin;
border-style: dotted;
border-color: grey;
}
b{
/* Border style */
border-top-width: thin;
border-bottom-width: thick;
border-style: double;
border-color: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h1> How to use and style borders using CSS? </h1>
<br>
<container> Basic Border style property with border width </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result displays various border attributes for individual sides.
CSS Border Color using the Border Side's Property
CSS style border property specifies the color of the border for different elements. It allows us to define borders on specific sides like top, bottom, left, and right as needed.
Syntax
The subsequent syntaxes are employed to define the border sides and their respective colors.
border-bottom-color: color_name;
border-left-color: color_name;
border-right-color: color_name;
border-top-color: color_name;
Example
The upcoming example illustrates how HTML elements can have distinct border sides with varied colors.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> How to use and style border using CSS?
</title>
<style>
container{
padding-left:20px;
padding-right:20px;
/* Border style */
border-top-style: solid;
border-top-width: thick;
border-top-color: orange;
}
h2{
margin: auto;
padding: 10px;
color: Red;
border-color: black;
margin-top: 20px;
width: fit-content;
/* Border style */
border-right-style: dashed;
border-right-width: thick;
border-right-color: blue;
border-left-style: dashed;
border-left-width: thick;
border-left-color: blue;
}
h3{
/* Border style */
border-top-style: dotted;
border-top-width: thick;
border-top-color: aqua;
border-bottom-style: dotted;
border-bottom-width: thick;
border-bottom-color: aqua;
}
b{
/* Border style */
border-bottom-style: double;
border-bottom-width: thick;
border-bottom-color: green;
width: fit-content;
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<h2> How to use and style borders using CSS? </h2>
<br>
<container> Basic Border style property with border color </container>
<h3> C# Tutorial Website </h3>
<b> Attractive design and partition of elements are mostly dependent on the selection of border style. </b>
</body>
</html>
Output
The result illustrates various border attributes with different colors for each side.
Conclusion
The border style is implemented to separate elements using varying sizes, colors, and patterns. This allows for the creation of visually appealing and impactful borders around the element.