How to create and style borders using CSS?

CSS Web Development Front End Technology

We can define borders for an element and style them using CSS. The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Furthermore, images can be specified as a border.

Syntax

The syntax of CSS border property is as follows −

Selector {
   border: /*value*/
}

Example

The following examples illustrate CSS border property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   border: 70px solid transparent;
   margin: 15px;
   padding: 3px;
   border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
   background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow is an open source machine learning framework for all developers. It is used for implementing machine learning and deep learning applications.</p>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
   margin: auto;
   width: 60%;
   border: 4px solid sienna;
   padding: 10px;
   background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
   border-radius: 55px 100px 2px 95px;
}
#d2 {
   border: 1.5px solid rosybrown;
   padding: 10px;
   border-radius: 205px 500px;
}
img {
   border-radius: 3% 50%;
   display: block;
   margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html>