Introduction to the CSS Box Model - Borders The complete CSS3 tutorial

{tab CSS comments}

{tab Linking CSS to HTML}

{tab CSS Selectors Notes}

{tab Margin Notes}

{tab Borders}

{tab Padding}

{/tabs}

A basic border - by using the border-style, border-color and border-width properties, we can easily give an element the border we want.

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        border
-color: CornflowerBlue;
        border
-width: 2px;
        border
-style: solid;

}
</style>

<div class="box">
        Hello, world!
</div>

Border color

Just a plain old color property, where you can define the color for the border in several different ways, as it is with all color related properties in CSS. Look elsewhere in this tutorial for a complete walkthrough of all the options you have when defining a color in CSS.


 Border width

Works much like margins and paddings - can be either an absolute value, like in this example, a relative value, or one of the pre-defined border width values: Thin, medium or thick. If you use the pre-defined values, it's up to the browser to interpret them, which basically gives you less control of how your work will look across all the different devices and browsers.


 Border style

For the style of the border, you have a range of options. The most commonly used is probably the solid border, but there are many more to choose from: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Wanna know how they all look?

 

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        border
-color: CornflowerBlue;
        border
-width: 4px;
        margin
: 10px;
       
float: left;

}
</style>

<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>

 

Shorthands

properties which allows you to define values for multiple properties at the same time. In the first example, we actually used shorthand properties to define the same color, width and style for borders of all four sides of an element. For instance, border-style actually maps to border-top-style, border-right-style, border-bottom-style and border-left-style, and the same goes for border-width and border-color. This also means that border-style, border-color and border-width can all take from one to four values, allowing you to use different styles, colors and widths for all four sides of the element

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        border
-style: solid dashed ridge dotted;
        border
-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
        border
-width: 1px 2px 3px 4px;

}
</style>

<div class="box">
        Hello, world!
</div>

 Using the border property, you can shorten it even more.

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        border
: 2px solid CornflowerBlue;
}
</style>

<div class="box">
        Hello, world!
</div

Border radius

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        border
: 3px solid CornflowerBlue;
        border
-radius: 5px;
}
</style>

<div class="box">
        Hello, world!
</div>

Border-radius is a shorthand property, short for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. You can set these individually, or use one or several values for the border-radius property to have different values for the four corners of an element.

 

<style type="text/css">
.circle {
        width
: 100px;
        height
: 100px;
        background
-color: CornflowerBlue;
        border
-radius: 50%;
}
</style>

<div class="circle"></div>