Page Widget How to - Wrap around border text

Question

We would like to know how to wrap around border text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  w  ww. jav a2s . c  om-->
  border: 1px solid #f00;
}

h1 {
  display: inline;
}
</style>
</head>
<body>
  <div id='page' style='width: 600px'>
    <h1 style='border: 2px black solid; font-size: 42px;'>Title</h1>
  </div>
</body>
</html>

The code above is rendered as follows: