Scribd
Upload
5 views7 pages

CSS Border Color

The document provides a tutorial on CSS, specifically focusing on the 'border-color' property. It explains how to set border colors using color names, HEX, RGB, and HSL values, along with examples for each method. Additionally, it includes exercises for practical application of the concepts discussed.

Uploaded by

marcar1976
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views7 pages

CSS Border Color

The document provides a tutorial on CSS, specifically focusing on the 'border-color' property. It explains how to set border colors using color names, HEX, RGB, and HSL values, along with examples for each method. Additionally, it includes exercises for practical application of the concepts discussed.

Uploaded by

marcar1976
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

❯

 Tutorials  References  Exercises  Certificates  Search... Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To CSS Border Color
CSS Comments
CSS Errors ❮ Previous Next ❯
CSS Colors 
CSS Backgrounds 
CSS Borders
Borders

CSS Border Color
Border Width
The border-color property is used to set the color of the four borders.
Border Color
Border Sides The color can be set by:
Border Shorthand
Rounded Borders name - specify a color name, like "red"
CSS Margins HEX - specify a HEX value, like "#ff0000"

CSS Padding RGB - specify a RGB value, like "rgb(255,0,0)"
CSS Height/Width HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
CSS Box Model
transparent

CSS Outline  Note: If border-color is not set, it inherits the color of the element.
CSS Text 
CSS Fonts 
CSS Icons
Example
CSS Links
CSS Lists Demonstration of the different border colors:
CSS Tables 
CSS Di l
CSS Display
❯
 Tutorials 
p.one {
References  Exercises 
border-style: solid;
Certificates  Upgrade Get Certified

border-color: red;
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
}

CSS Tutorial p.two {


CSS HOME border-style: solid;
CSS Introduction border-color: green;
CSS Syntax }

CSS Selectors
p.three {
CSS How To
border-style: dotted;
CSS Comments
border-color: blue;
CSS Errors }
CSS Colors  COLOR
CSS Backgrounds  Result: PICKER
CSS Borders 
Borders
Border Width Red border
Border Color
Border Sides Green border
Border Shorthand 
Rounded Borders 
Blue border
CSS Margins 
CSS Padding
CSS Height/Width
Try it Yourself »
CSS Box Model
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons Specific Side Colors
CSS Links
CSS Lists The border-color property can have from one to four values (for the top border, right border, bottom
CSS Tables  border, and the left border).
CSS Di l
CSS Display
❯
 Tutorials  References 
Example Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY
p.one {
border-style: solid;
CSS Tutorial
border-color: red green blue yellow; /* red top, green right, blue bottom and
CSS HOME yellow left */
CSS Introduction }
CSS Syntax
CSS Selectors Try it Yourself »
CSS How To
CSS Comments
CSS Errors
CSS Colors 
CSS Backgrounds 
CSS Borders 
Borders
Border Width
HEX Values
Border Color The color of the border can also be specified using a hexadecimal value (HEX):
Border Sides
Border Shorthand
Rounded Borders Example
CSS Margins 
CSS Padding p.one {
CSS Height/Width border-style: solid;
CSS Box Model border-color: #ff0000; /* red */
CSS Outline }

CSS Text 
CSS Fonts  Try it Yourself »
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l
CSS Display
 Tutorials  RGB
References  Values
Exercises  Certificates  Upgrade
❯
Get Certified

HTML CSS JAVASCRIPT SQL PYTHON


Or by using JAVA
RGB values: PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME Example
CSS Introduction
CSS Syntax p.one {
CSS Selectors border-style: solid;
CSS How To border-color: rgb(255, 0, 0); /* red */
}
CSS Comments
CSS Errors
CSS Colors Try it Yourself »

CSS Backgrounds 
CSS Borders 
Borders
Border Width
Border Color
HSL Values
Border Sides
You can also use HSL values:
Border Shorthand
Rounded Borders
CSS Margins  Example
CSS Padding
CSS Height/Width p.one {
CSS Box Model border-style: solid;
CSS Outline  border-color: hsl(0, 100%, 50%); /* red */
CSS Text }

CSS Fonts 
CSS Icons Try it Yourself »
CSS Links
CSS Lists
CSS Tables 
CSS Di l
CSS Display
You can learn more about HEX, RGB and HSL values in our CSS Colors chapters. ❯
 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
?
CSS HOME
CSS Introduction
Exercise
CSS Syntax Drag and drop the correct property and value to set the border color to
CSS Selectors "green".
CSS How To
CSS Comments p {
CSS Errors border-style: solid;
CSS Colors  : ;
CSS Backgrounds  }
CSS Borders 
Borders
Border Width green border-set color border-color
Border Color border-style
Border Sides
Border Shorthand
Rounded Borders Submit Answer »
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text  ❮ Previous Next ❯
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l
CSS Display
❯
 Tutorials  References  Exercises  Certificates  Upgrade Get Certified

HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
 PLUS SPACES GET CERTIFIED FOR TEACHERS

CSS Introduction
CSS Syntax
CSS Selectors FOR BUSINESS CONTACT US
CSS How To
CSS Comments
CSS Errors
Top Tutorials Top References Top Examples
CSS Colors HTML
 Tutorial HTML Reference HTML Examples
CSS Tutorial CSS Reference CSS Examples
CSS Backgrounds  Tutorial
JavaScript JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
CSS Borders  Tutorial
SQL Python Reference SQL Examples
Borders Python Tutorial W3.CSS Reference Python Examples
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Border Width Bootstrap Tutorial PHP Reference Bootstrap Examples
PHP Tutorial HTML Colors PHP Examples
Border Color Java Tutorial Java Reference Java Examples
Border Sides C++ Tutorial Angular Reference XML Examples
jQuery Tutorial jQuery Reference jQuery Examples
Border Shorthand
Get Certified
Rounded Borders
CSS Margins HTML Certificate
 Certificate
CSS
CSS Padding JavaScript Certificate
Front End Certificate
CSS Height/Width SQL Certificate
Python Certificate
CSS Box Model
PHP Certificate
CSS Outline jQuery Certificate

Java Certificate
CSS Text  Certificate
C++
C# Certificate
CSS Fonts  Certificate
XML
CSS Icons
CSS Links
CSS Lists
     FORUM ABOUT ACADEMY
CSS Tables 
CSS Di l
CSS Display W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
❯
 Tutorials  References 
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
Exercises  Certificates 
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Upgrade Get Certified

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY

CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How To
CSS Comments
CSS Errors
CSS Colors 
CSS Backgrounds 
CSS Borders 
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins 
CSS Padding
CSS Height/Width
CSS Box Model
CSS Outline 
CSS Text 
CSS Fonts 
CSS Icons
CSS Links
CSS Lists
CSS Tables 
CSS Di l

You might also like