CSS Border
Borders in CSS are used to add visual separation and distinction between elements on a web page.
Borders in CSS are used to add visual separation and distinction between elements on a web page.
Set the color of the border using the border-color property.
Define the style of the border using the border-style property. Common values include solid, dotted, dashed, double, and none.
<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>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
Define the width of the border using the border-width property. You can use values like 1px, 2px, 3px, etc.
You can use the shorthand border property to define all border properties (color, width, and style) in one line. For example:
Use the border-radius property to create rounded corners for elements. You can specify a single value for a uniform radius or separate values for individual corners.
.element {
border-radius: 10px; /* Uniform radius for all corners */
}
.element {
border-radius: 10px 20px 30px 40px; /* Top-left, Top-right, Bottom-right, Bottom-left */
}
box-shadow property.
This technique allows you to create unique and complex border effects.border-image property.
This is especially useful for creating decorative borders with patterns or images.background-image property in combination with linear-gradient() or radial-gradient()..element {
box-shadow:
0 0 0 5px red, /* Red border */
0 0 0 10px blue, /* Blue border */
0 0 0 15px green; /* Green border */
}