Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Borders

CSS border properties enable you to define the style, width, and color of a border surrounding an element.

CSS Border Style

The border-style property specifies the type of border to display, with the following allowed values:

dotted: Creates a dotted border.
dashed: Generates a dashed border.
solid: Sets a solid border.
double: Establishes a double border.
groove: Produces a 3D grooved border; the effect depends on the border-color value.
ridge: Creates a 3D ridged border; the effect depends on the border-color value.
inset: Generates a 3D inset border; the effect depends on the border-color value.
outset: Creates a 3D outset border; the effect depends on the border-color value.
none: Specifies no border.
hidden: Hides the border.

The border-style property can accept from one to four values, representing the top, right, bottom, and left borders, respectively.

Example

Illustration showcasing various border styles.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Outcome:

Absence of a border.

An invisible border.

Note: Without setting the border-style property, none of the other CSS border properties, which will be elaborated on in the subsequent chapters, will have any impact.