1 00:00:00,000 --> 00:00:03,990 Borders define the outside edge of elements and are usually used to apply a 2 00:00:04,000 --> 00:00:06,990 decorative effect to the specific elements. 3 00:00:07,000 --> 00:00:12,990 Element borders are usually defined by three properties: style, width, and color. 4 00:00:13,000 --> 00:00:17,990 Much like margins and padding, borders can be defined for the top, right, bottom 5 00:00:18,000 --> 00:00:21,990 and left sides individually, or defined for the entire element at the same time. 6 00:00:22,000 --> 00:00:27,990 Now, border syntax can sometimes be quite verbose, as you can specify width, style, 7 00:00:28,000 --> 00:00:29,990 and color for each individual side. 8 00:00:30,000 --> 00:00:34,990 Now because of this, authors typically use border shorthand notation that allows 9 00:00:35,000 --> 00:00:38,990 you to set all three border properties at the same time. 10 00:00:39,000 --> 00:00:42,990 The important thing to remember about borders is that they do affect the overall 11 00:00:43,000 --> 00:00:44,990 width of an element. 12 00:00:45,000 --> 00:00:49,990 Border widths begin at the edge of padding widths and then extend outward. 13 00:00:50,000 --> 00:00:53,990 It's easy to forget about a one-pixel border on an element, but this is often 14 00:00:54,000 --> 00:00:58,990 the culprit for breaking layouts or causing elements to shift unexpectedly. So 15 00:00:59,000 --> 00:01:03,990 when authoring CSS, be sure to account for border widths when planning layouts. 16 00:01:04,000 --> 00:01:08,990 Now border width is pretty self- explanatory, but border styles and border colors 17 00:01:09,000 --> 00:01:10,990 deserve a closer look. 18 00:01:11,000 --> 00:01:15,990 Border styles can be set in one of ten values: none, hidden, dotted, dashed, 19 00:01:16,000 --> 00:01:20,990 solid, double, groove, ridge, inset, and outset. 20 00:01:21,000 --> 00:01:23,990 None and hidden are very similar, except for when tables come in the play, 21 00:01:24,000 --> 00:01:26,990 where there are some certain differences regarding when borders are drawn 22 00:01:27,000 --> 00:01:27,990 around table cells. 23 00:01:28,000 --> 00:01:32,990 Now solid, dotted, and dashed create a single flat line 24 00:01:33,000 --> 00:01:36,990 that's either solid, broken into dots, or broken into dashes. 25 00:01:37,000 --> 00:01:40,990 Although support for border styles is almost complete in browsers, 26 00:01:41,000 --> 00:01:46,990 some older browsers don't support the dotted value, resulting in dashed lines when found. 27 00:01:47,000 --> 00:01:51,990 The remaining values--double, groove, ridge, inset, and outset--create dimensional 28 00:01:52,000 --> 00:01:55,990 line affects that often require width values greater than one. 29 00:01:56,000 --> 00:01:59,990 The border-color property allows you to define the color of the border 30 00:02:00,000 --> 00:02:04,990 independently of the color of the element's foreground and background. While 31 00:02:05,000 --> 00:02:09,990 most border style properties will display the color specified, a few of the 3D- 32 00:02:10,000 --> 00:02:14,990 like values, will actually use the color as a highlight value or not at all, 33 00:02:15,000 --> 00:02:16,990 depending upon browser implementation. 34 00:02:17,000 --> 00:02:21,990 Most designers use borders for decorative effects, or as a way of providing 35 00:02:22,000 --> 00:02:23,990 visual separation between elements. 36 00:02:24,000 --> 00:02:28,990 Borders can also be used as a way of creating text rules between blocks of text, 37 00:02:29,000 --> 00:02:31,990 and as a way of replacing the default underlines under linked text. 38 00:02:32,000 --> 00:02:35,990 A relatively new addition to borders is the border-image property. 39 00:02:36,000 --> 00:02:39,990 This allows you to specify an image that will be sliced and then aligned with 40 00:02:40,000 --> 00:02:44,990 the elements' corners and repeated or stretched in the middle sections. 41 00:02:45,000 --> 00:02:48,990 The syntax is a bit too much to cover in a general overview, and browser support 42 00:02:49,000 --> 00:02:53,990 is just now starting to solidify, but this is definitely a technique that should 43 00:02:54,000 --> 00:02:56,990 be on your radar as a designer. 44 00:02:57,000 --> 00:02:59,990 Before we move on, I also want to take a moment to discuss the difference 45 00:03:00,000 --> 00:03:02,990 between a border and an outline. 46 00:03:03,000 --> 00:03:07,990 The outline property has been a part of the CSS specification since CSS 2.0, but 47 00:03:08,000 --> 00:03:10,990 it's only very rarely discussed in tutorials. 48 00:03:11,000 --> 00:03:14,990 One of the biggest reasons for this is that unlike borders, outlines can only be 49 00:03:15,000 --> 00:03:19,990 set on the entire element, not the individual sides, like borders can. 50 00:03:20,000 --> 00:03:23,990 You can, however, set width, style, and color just like the border property. 51 00:03:24,000 --> 00:03:28,990 One other intriguing difference between borders and outlines is that outlines do 52 00:03:29,000 --> 00:03:31,990 not add to the total width of an element. 53 00:03:32,000 --> 00:03:35,990 This rather odd behavior means that outlines will often overlap other elements 54 00:03:36,000 --> 00:03:40,990 when they come in contact with them; however, outlines can be set on elements 55 00:03:41,000 --> 00:03:44,990 without breaking layouts or causing other elements to shift, making them 56 00:03:45,000 --> 00:03:47,990 valuable in those situations. 57 00:03:48,000 --> 00:03:51,990 The biggest reason for authors ignoring the outline property, however, is its 58 00:03:52,000 --> 00:03:53,990 lack of broad support among browsers. 59 00:03:54,000 --> 00:03:58,990 Safari, Opera, and Chrome have supported it for some time, but Firefox's 60 00:03:59,000 --> 00:04:03,990 support is still a little bit buggy, and Internet Explorer has only recently supported it. 61 00:04:04,000 --> 00:04:07,990 Still, it's worth mentioning, since it gives you an alternative to using 62 00:04:08,000 --> 00:04:18,000 the border property.