Managing Borders - Specify Simple Border

Category	: CSS		Views	: 2566
Version	: 2.0		Rating	:	3.0/5 (19 votes) Currently 3.00/5 1 2 3 4 5
Type	: Text

Let’s say you want to surround a certain element of your webpage with borders – you might be asking yourself in this case – can I do something a bit different with CSS? Of course you can, actually, it is a known fact between all CSS coders (and not only) that CSS offers a large variety of ways through which you can employ your borders. Not only that, but through CSS you can actually add borders to almost any element you want.

Before we get deeper into the subject we need to know what exactly a border in CSS is. Well, in CSS a border is normally just a line – a frame that surrounds a certain element. This is the basic definition of a border; obviously you can edit it in many different ways. For example, if you need or like, you can leave out any of the four lines of the border or define their properties individually. Until now we know that a border is used to surround a certain element – Optionally, a border may surround any padding that you may have specified for that certain element. What it does not surround is any kind of optional margin applied. Instead, a border will separate your element from the other elements that surround it.

You can edit your borders by giving them color, changing their thickness and style (for example if you want a dotted border, an inset one, and so on). Thickness and width can have their properties established in the usual CSS way – by simply using measurement units such as em, in or px – but also by using the default medium specification which is about two or three pixels wide. Regarding color – you need to know that the border has as a default color the text color of its element, and if the element contains no text then the text color of the parent element will be applied.

How to specify a simple border in CSS

Whenever you intend to customize (or apply) a border in CSS you will see that you can find a large variety of borders at your disposal. One of the simplest borders (and specifications) is the one that just uses the border property followed by three specific values, about which we talked above – width, style and of course, color, separated by spaces. Here is a sample code: