• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > border-style Property

12.2. border-style Property

The border-style property determines the type of border that the browser will display around a given element on a Web page, such as text or an image. Using this property, you can add stylish and eye-catching borders to your Web page. Up until now, the only HTML equivalent was to create a table and turn on the border attribute. There is no way to otherwise change the solid border that would be displayed. With border-style you can play with up to a dozen different values for the type of border that can be displayed, although until recently only a few of these values were supported in Netscape Navigator or Internet Explorer.

There are a number of 2D and 3D border types. The 2D borders are created by the values dashed, dotted, double and solid, while the 3D borders are created by the inset, outset, groove and ridged values. Of the 2D border types, the dashed value displays a border made up of dashes, the dotted value displays a border made from small dots, the double value creates a border made from a double line, and solid displays a solid border style. Of the 3D border types, inset creates a border that appears recessed, while outset creates a border that appears the opposite of inset. groove displays a 3D grooved border line and ridge creates a 3D ridged border line. The value none ensures that no border is displayed. The CSS2 specification added a further variant on none called hidden, which has the same effect, but is supposed to be used in conjunction with table elements to resolve any possible conflicts that might arise. Then there's the inherit value, which takes on any border value previously assigned to a parent element.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint