css 3

Icon

A comprehensive CSS 3 reference guide, tutorial, and blog
Are you a CSS expert? Want to contribute? Contact us

CSS BORDER-STYLE

This is a shorthand property which allows an author to specify ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, and ‘border-left-style’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

 

Example

strong { border-style: groove inset solid none }

<strong style=”border-style: dotted”>this is a test</strong>

 

Possible Values

Value Description
inherit Explicitly sets the value of this property to that of the parent.
none No border is rendered. This overrides any value of ‘border-width’, if present.
hidden Creates the same effect as ‘none’. Only difference is for border conflict resolution for table elements.
dotted The border is rendered as a series of dots.
dashed The border is rendered as a series of short lines.
solid Renders a solid line.
groove Creates the effect of the border being grooved or carved in the rendering surface (A 3-D groove – the opposite of ‘ridge’.) The groove bevel color is rendered based upon the value of the ‘color’ property.
ridge Creates the effect of the border being raised from the rendering surface (A 3-D ridge – the opposite of ‘groove’.) The ridge bevel color is rendered based upon the value of the ‘color’ property.
inset Creates the effect of the border being embedded in the rendering surface (A 3-D inset.) The inset bevel color is rendered based upon the value of the ‘color’ property. A distinction exists between this value and ‘groove’.
outset Creates the effect of the border coming out of the rendering surface (A 3-D outset – the opposite of ‘inset’.) The outset bevel color is rendered based upon the value of the ‘color’ property. A distinction exists between this value and ‘ridge’.
double A double line drawn on top of the background of the element. The two lines with the space between adds up to the value of the ‘border-width’ property.

 

One Response

  1. Alan Anderson says:

    I am using CSS solid borders for the elements of a table in PHP. The table cells get their data from a mySQL databse. If there is not data in the table, there is of course no data in the table cell. But the border is missing. Can you advise?

Leave a Reply

Pages

Sponsors

$100 PSD to XHTML. CONTACT US FOR MORE INFORMATION


CSS3.com



Please help CSS3.com stay alive and running

Bad Behavior has blocked 1192 access attempts in the last 7 days.