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

Border Color

The border-color property is utilized to define the color for all four borders.

The color can be designated using:

Name: Indicate a color name, such as “red”.
HEX: Specify a HEX value, for instance, “#ff0000”.
RGB: Set an RGB value, like “rgb(255,0,0)”.
HSL: Provide an HSL value, such as “hsl(0, 100%, 50%)”.
Transparent

Note: When border-color is not explicitly specified, it adopts the color of the element it belongs to.

Example

Illustration showcasing various border colors:

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

Outcome:

Specific Side Colors

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

Example

p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

HEX Values

You can also define the border color using a hexadecimal value (HEX).

Example

p.one {
border-style: solid;
border-color: #ff0000; /* red */
}

RGB Values

Alternatively, you can specify the border color by using RGB values.

Example

p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}

HSL Values

HSL values can also be utilized for specifying the border color.

Example

p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}

For more information on HEX, RGB, and HSL values, refer to our CSS Colors chapters.