Click here to Skip to main content
15,919,500 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
I'm new to html & css (self taught) and playing around with borders in css. But when I open the file in my browser, the borders aren't being shown. So far all my other practice projects with css work; i.e. color, box dimensions, text-dec, font, etc.

<!DOCTYPE html>
<html>
<head>
<title>Borders</title>
<link href="css/border.css" text="text/css" rel="stylesheet" />
</head>
<body>

Border-Width


Hohner's "Clavinet" is essentially an electric clavichord.


Hohner's "Clavinet" is essentially an electric clavichord.


Hohner's "Clavinet" is essentially an electric clavichord.


</body>
</html>

p.one {
border-width: 2px;
}
p.two {
border-width: thick;
}
p.three {
border-width: 1px 4px 12px 4px;
}
Posted

1 solution

Correct example:
HTML
<html>
   <head>
      <title>Borders</title>
      <style type="text/css">
         p { padding: 1em; }
         .one { border: solid thick; }
         .two { border: solid 2px; }
         .three { border: solid; border-width: 1px 4px 12px 4px; }
      </style>
   </head>
<body>

<p class="one">Hohner's "Clavinet" is essentially an electric clavichord.</p>
<p class="two">Hohner's "Pianet" is an electric piano.</p>
<p class="three">Hohner's "Guitaret" is an electric piano/kalimba-type instrument.</p>

</body>
</html>


You forgot the border property line type ("solid") and the syntax for different width for the same border on different sides.
Besides, I demonstrated that for a demo prototype, it can be important to use text closer to real content.

—SA
 
Share this answer
 
v5

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900