We can mix border widths, styles, and colors in CSS. We can specify the border styles using the border-style property, border widths using the border-width property, and border colors using the border-color property.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</body>
</html>
Our simple html example.
p {
border-style: solid;
border-width: 15px;
border-color: red;
border-left-width: 25px;
border-right-width: 50px;
border-top-width: 100px;
border-bottom-width: 100px;
border-top-style: dotted;
border-bottom-style: dashed;
}
The end result will be a paragraph element with a border that has varying widths and styles on each side, as well as a different color from the default color.
p {
border-style: solid;
border-width: 15px;
border-color: red;
border-left-width: 25px;
border-right-width: 50px;
border-top-width: 100px;
border-bottom-width: 100px;
border-top-style: dotted;
border-bottom-style: dashed;
border-bottom-color: yellow;
border-top-color: navy;
}
The end result of this CSS code will be a paragraph element with a solid border style, 15 pixels width and red color.
The left border will have a width of 25 pixels, the right border will have a width of 50 pixels, the top border will have a dotted style and a width of 100 pixels, and the bottom border will have a dashed style and a width of 100 pixels.
The top border color will be navy, and the bottom border color will be yellow.
The left and right borders will have the same color as the top and bottom borders, which is red.
No comments:
Post a Comment