Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS border-color Property</title> <style> p { border-width: 15px; padding: 20px; margin: 20px; } p.one { border-style: solid; border-color: #ff0000; } p.two { border-style: solid; border-color: #ff0000 #00ff00; } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff; } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff; } </style> </head> <body> <p class="one"><strong>one-value syntax:</strong> the single value sets the color of all four border sides.</p> <p class="two"><strong>two-value syntax:</strong> the first value sets the color of the top and bottom border, while the second value sets the color of the right and left sides border.</p> <p class="three"><strong>three-value syntax:</strong> the first value sets the color of the top border, the second value sets the color of the right and left border, and the third value sets the color of the the bottom border.</p> <p class="four"><strong>four-value syntax:</strong> each value sets the color of the border individually in the order top, right, bottom, and left.</p> </body> </html>