CSS border – define border properties of an element

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

CSS property border

CSS version: CSS 2.1
Value: [border-width || border-style || color] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Few points to note:

  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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments