Curriculum
Course: CSS
Login

Curriculum

CSS

CSS INTRODUCTION

0/1

CSS Selectors

0/1

CSS Comments

0/1

CSS Padding

0/1

CSS Box Model

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Specificity

0/1

CSS Math Functions

0/1
Text lesson

Border Width

Width can be defined using a specific size unit (such as px, pt, cm, em, etc.) or by utilizing one of the three pre-defined values: thin, medium, or thick.

 

Example

Displaying various border widths.

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

Outcome:

Image

Specific Side Widths

The border-width property can accept between one to four values, corresponding to the top, right, bottom, and left borders.

Example

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}