Borders

Theo mặc định, các element trong HTML không có khung nhưng CSS cho phép định nghĩa với một loạt các thuộc tính của khung. Thực tế, khung có thể thay đổi thông qua các thuộc tính và đôi khi hơi phức tạp. Tuy nhiên, ở mức cơ bản thì thường chỉ thay đổi màu khung, chiều rộng và kiểu, vậy hãy xem một ví dụ:

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

Bằng cách dùng border-style, border-color và border-width, chúng ta có thể dễ dàng thiết đặt đường bao cho một element mà chúng ta muốn. Nào chúng ta hãy nói về ba thuộc tính này.

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

Về kiểu của khung, bạn có nhiều lựa chọn. Thông dụng nhất là khung liền, nhưng có nhiều kiểu nữa: hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Muốn biết trông chúng như thế nào? Hãy xem ví dụ sau:

<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

We talked about shorthand properties earlier - 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. Here's an example:

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

Now the final result is a pretty odd looking box, but hopefully you can see how it works. Just like with margins, you can specify one or several values, which will be applied from the top and clockwise around the element (top, right, bottom, left).

Without these shorthands, you would have to use 12 properties to achieve the same result, but it can get even shorter: Using the border property, you can shorten it even more. Here is our very first example, re-written to use the border property:

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

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

We just saved a couple of properties more! When using the border property, the correct order is width, style and color and while the browser may be able to understand it even if you don't get the order right, it's recommended to always use this specific order when using the border property. Notice that you ARE allowed to skip one or two values - in that case, the browser will try to understand which of them you skipped and assign the default values for the missing ones.

Border radius

As an addition to CSS 3, the ability to define border radius was added, effectively giving developers the possibility to make rounded corners on their elements. For new developers, this might seem trivial, but before this was added, the desire for rounded corners generated hundreds of how-to articles!

Fortunately, that was in the past and thanks to the border-radius property, it's now as easy as pie to get rounded corners:

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

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

The only disadvantage is the lack of support for this in Internet Explorer 8 and versions below it, but they will simply fall back to regular corners. As you may have guessed by now, 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.

The border-radius property takes absolute and relative values, just like most other CSS length units, and in the next example, I'll use that to create corners so rounded that the usual squared box actually becomes a circle:

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

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

Pretty cool, right?

Summary

Borders are a great tool when designing your webpages and as you can see from the above examples, they are both flexible and easy to use. The amount of shorthand properties can make things a bit confusing, but after a while, you will get the hang of it.