Dashed Box Border, XHTML CSS

All content in the division(DIV) tags will have borders. You can control the border size and color, and choose the background color to suit your web page layout.

With your imagination, XHTML and CSS border can have a lot of creative combinations. The following example code is a more basic model and give you as a reference.

Resources:

CSS Code

<style type="text/css">

 div.c1 {border: 2px dashed red; padding: 5px; background-color: #FFFF66}

 div.c2 {border: 1px dashed grey; width: 500px; height: 300px; padding: 5px; background-color: #FFFFFF}

</style>

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">

 div.c1 {border: 2px dashed red; padding: 5px; background-color: #FFFF66}

 div.c2 {border: 1px dashed grey; width: 500px; height: 300px; padding: 5px; background-color: #FFFFFF}

</style>
</head>

<body>
  <div class="c1">
    <p>Your content here. Your content here. Your content here.</p>
  </div><br />

  <div class="c2">
    <p>Your content here. Your content here. Your content here.</p>
  </div><br />
</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout