CSS Create Frames

The word frame refers to a border or a line around anything like image, content, text etc. Therefore, this article deals with creating a frame around an HTML element, using of course CSS. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{position: relative; width: 290px; height: 100px;}
      .frame{position: absolute; border: 4px solid purple;}
      .content{padding: 12px;}
   </style>
</head>
<body>

   <div class="container">
      <div class="frame">
         <div class="content">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde ipsa
            mollitia minima sapiente, enim natus pariatur. Sunt adipisci culpa corporis.
         </div>
      </div>
   </div>

</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde ipsa mollitia minima sapiente, enim natus pariatur. Sunt adipisci culpa corporis.

Note - The position property defines the position of an element.

Note - The border property creates a border around an element.

Note - The padding property creates space between the border and the content of specified element.

Create Frame around an Image using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{position: relative;}
      .frame{position: absolute; border: 14px dotted red;}
   </style>
</head>
<body>

   <div class="container">
      <div class="frame">
         <img src="images/small-plant.jpg" alt="small plant">
      </div>
   </div>

</body>
</html>

Output

We can also create frame along with some space around an element. To do this, we need to use the padding property, like shown in the example given below:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{position: relative;}
      .frame{position: absolute; border: 14px solid blue; padding: 12px;}
   </style>
</head>
<body>

   <div class="container">
      <div class="frame">
         <img src="images/small-plant.jpg" alt="small plant">
      </div>
   </div>

</body>
</html>

Output

CSS Create Frame Example

We can also create frame without using the border property. Here is an example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{position: relative; width: 290px; height: 100px;}
      .frame{position: absolute; background-color: green;}
      .content{margin: 18px; padding: 12px; background-color: white;}
   </style>
</head>
<body>

   <div class="container">
      <div class="frame">
         <div class="content">
            <p>Creating Frame using CSS</p>
         </div>
      </div>
   </div>

</body>
</html>

Output

Creating Frame using CSS

CSS Online Test

« Previous Tutorial jobails.com »