CSS Tutorials
Tags: ,
Categories: ,

Overview

The CSS border property allow you to specify the style, width, color, radius, etc. of an element’s border. The element’s border is the line that can appear on any of an element’s sides or all of the sides. It can have varying thicknesses, colors, styles, etc.

Each side of the element can be styled separately from the others, or all can be styled as one.

For instance, the note below has a solid, green, 4px border applied to just the left side of the element.

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

To have a border, the width and style must be set. If the color is not specified, the color of the text will be used.

div {
    border-width: 1px;
    border-style: solid;
}
Content

Border Color

The border-color property sets the color of all four borders of an element, and can have from one to four values.

/* set all 4 borders to red */
div {
    border-color: red;
}
Content

Border Style

The border-style property sets the style of all four borders of an element, and can have from one to four values.

/* sets all 4 borders */
div {
    border-style: dashed;
}
Content

Border Width

The border-width property sets the width of an element’s borders. An element must have a border before you can change the width.

/* sets all 4 borders */
div {
    border-width: thick;
}
Content

Border Image

The border-image property allows for the use of an image as the border of an element.

/* file location, border width, image repeats */
div {
    border-image: url(border_image.jpg) 15 repeat;
}

Border Radius

The border-radius property defines the radius of an element’s corners to give the element rounded corners. This property can have from one to four values.

/* all borders have an equal radius */
div {
    border-radius: 20px;
}
Content

Note

An element does not need to have a border applied for the border-radius property to be used. The name is a little misleading in that the border-radius will create a corner radius on an element with or without a border.

Border Properties

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.