tarihinde yayınlandı Yorum yapın

html border-style

CSS border-style Property

❮ PreviousComplete CSS ReferenceNext ❯

Example

Set a style for the border:div {border-style: dotted;}Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The border-style property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;
    • all four borders are dotted

Show demo ❯

Default value:none
Inherited:no
Animatable:no. Read about animatable
Version:CSS1
JavaScript syntax:object.style.borderStyle=”dotted double”Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-style1.04.01.01.03.5

Note: The value “hidden” is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support “hidden”.


ADVERTISEMENT


CSS Syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

ValueDescriptionDemo
noneDefault value. Specifies no borderDemo ❯
hiddenThe same as “none”, except in border conflict resolution for table elementsDemo ❯
dottedSpecifies a dotted borderDemo ❯
dashedSpecifies a dashed borderDemo ❯
solidSpecifies a solid borderDemo ❯
doubleSpecifies a double borderDemo ❯
grooveSpecifies a 3D grooved border. The effect depends on the border-color valueDemo ❯
ridgeSpecifies a 3D ridged border. The effect depends on the border-color valueDemo ❯
insetSpecifies a 3D inset border. The effect depends on the border-color valueDemo ❯
outsetSpecifies a 3D outset border. The effect depends on the border-color valueDemo ❯
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit

More Examples

Example

A dashed border:div {border-style: dashed;}Try it Yourself »

Example

A solid border:div {border-style: solid;}Try it Yourself »

Example

A double border:div {border-style: double;}Try it Yourself »

Example

A groove border:div {
  border-style: groove;
  border-color: coral;
  border-width: 7px;
}Try it Yourself »

Example

A ridge border:div {
  border-style: ridge;
  border-color: coral;
  border-width: 7px;
}Try it Yourself »

Example

An inset border:div {
  border-style: inset;
  border-color: coral;
  border-width: 7px;
}Try it Yourself »

Example

An outset border:div {
  border-style: outset;
  border-color: coral;
  border-width: 7px;
}Try it Yourself »

Example

Set different borders on each side of an element:p.one {border-style: dotted solid dashed double;}
p.two {border-style: dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four {border-style: dotted;}Try it Yourself »


CSS tutorial: CSS Border

HTML DOM reference: borderStyle property