Borders part 2

Border Width



The properties for the border can be set separately. The border-width property specifies the width of the border.

The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
Border width of this paragraph is set to 5px.
</p>

The CSS:
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}
Try It Yourself

Result:

Border Color



The border color of the element can be defined using a color name, RGB, or Hex values. 
The HTML:<p class="first">
Border color has been created using <strong>color name.</strong>
</p>
<p class="second">
Border color has been created using <strong>Hex values.</strong>
</p>
<p class="third">
Border color has been created using <strong>RGB values.</strong>
</p>

The CSS:
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: #FF6600;
}
p.third {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: rgb(0, 153, 0);
}
Try It Yourself

Result:
None of the border properties will have any effect unless the border-styleproperty is set.

Comments

Popular posts from this blog

font-family part 1