Scribd
Upload
1 views4 pages

23VNM009 Gopinath

The document explains how to set border colors for HTML elements using CSS. It provides an example HTML structure and corresponding CSS styles for different elements, detailing how to specify individual border colors. Additionally, it includes explanations on valid color values and shorthand properties for setting border colors.

Uploaded by

psgcas23vnm22
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
1 views4 pages

23VNM009 Gopinath

The document explains how to set border colors for HTML elements using CSS. It provides an example HTML structure and corresponding CSS styles for different elements, detailing how to specify individual border colors. Additionally, it includes explanations on valid color values and shorthand properties for setting border colors.

Uploaded by

psgcas23vnm22
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/ 4

NAME: GOPINATH V

ROLL NUMBER:23VNM009
SUBJECT:WEB TECHNOLOGY
CSS BORDER COLOR
1.HTML:
To set the border color of an element in HTML using CSS, you can use the border-color
property. You can set the color of all four borders simultaneously or specify each border
individually
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Color Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="example">GOPINATH V</h1>
<p class="example1">23VNM009</p>
<p class="example2">2nd BACHELOR OF VOCATIONAL NETWORKING AND MOBILE
APPLICATION</p>
<p class="example3">PSG COLLEGE OF ARTS & SCIENCE</p>
</body>
</html>

2.CSS:
.example {
border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
.example1 {
border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
.example2 {
border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
.example3 {
border-width: 2px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
body{
border-width: 2px;
border-style:double ;
background-color: lightblue;
text-align: center;
}

3.EXPLANATION:
i. ou can replace red, green, blue, and yellow with any valid CSS color value (e.g.,
#FF0000, rgb(255, 0, 0), etc.).
ii. The border color can be set individually for each side using border-top-color, border-
right-color, border-bottom-color, and border-left-color.
iii. The shorthand border-color property can set the colors in the order of top, right, bottom,
and left.

4.OUTPUT:

You might also like