CSS border – define border properties of an element

CSS border property can be used to define border properties of an element.

CSS property border

1. To inherit border from parent, value inherit can be used. By default border is not inherited.
2. We can separately define border-width, border-style and border-color. These properties can take 4 values (for top, right, bottom and left border).
3. We can also use border-top, border-right, etc. to have different style for each border side.
4. We can also use border-top-width, border-top-style, etc.
5. Some commonly used style values are solid, dotted, dashed, etc.

Border basic example

<style type="text/css">
.foo {
 width: 100px; height: 100px;
 border: 4px solid lightgreen;
}
</style>
<div class="foo">
Hello world in div
</div>

Border for each border side separately

<style type="text/css">
.foo {
  width: 100px; height: 100px;
  border-top-width: 10px;
  border-top-style: solid;
  border-top-color: red;
  border-right:4px dashed gray;
  border-left:5px dotted green;
  border-bottom:5px dotted red;
}
</style>
<div class="foo">
Hello world in div
</div>

Related

• CSS border-width - set element border width of four sides
• CSS border-color - define color of four borders
• CSS border-style tutorial and examples
• CSS border radius and round corners examples

Specification

• W3C CSS 2.1 border specification