Topics

CSS Borders

This tutorial helps you learn how to define a border around an element using CSS.

Using CSS3 Borders

There are two new properties of CSS3 that can be used to style the element's border more elegantly — the border-image property, which can be used for adding the images to borders, and the border-radius property to make the rounded corners without the use of any image.

These new border properties are described in the following section. Please check out the CSS border tutorial to learn more about other border-related properties.

Creating CSS Rounded Corners

You can create rounded corners using the border-radius property. This property typically specifies the shape of the corner of the outer border edge. Before CSS3, sliced images were used to create rounded corners that were rather bothersome.

<!DOCTYPE html>
<html>
<head>
           <title>CSS border</title>
<style>
.box {
    width: 300px;
    height: 150px;
    background: #ffb6c1;
    border: 2px solid #f08080;
    border-radius: 20px;
}
  </style>
</head>
<body>
           <div class="box">
             <h1>Welcome to CSS Tutorial</h1>
             <p>I am a CSS Developer!</p>
          </div>
           
</body>
</html>

Try With Example

Adding CSS3 Border Images

You can specify an image to act as an element's border by using the border-image property. The border design is created from the sides and corners of the image set in the border-image source URL. You can slice, repeat, scale and stretch the border image in different ways to fit the size of the border-image area.

<!DOCTYPE html>
<html>
<head>
           <title>CSS border</title>
<style>
.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("/assets/example-image/border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("/assets/example-image/border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("/assets/example-image/border.png") 30 30 round;
}
  </style>
</head>
<body>
           <div class="box">
             <h1>Welcome to CSS Tutorial</h1>
             <p>I am a CSS Developer!</p>
          </div>
           
</body>
</html>

Try With Example

Tip: The round option is a repeat option's variation that distributes the image tiles to connect the ends nicely.