- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create and style borders using CSS?
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 −
<!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
<!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>Output
This gives the following output −
Published on 06-Jan-2020 07:41:25
- Related Questions & Answers
- Create a link button with borders using CSS
- Add borders to pagination using CSS
- Adding Borders to Tables using CSS
- Collapsing Table Borders using CSS
- Adding Borders to Tables in CSS
- Add rounded borders to first and last link in the pagination using CSS
- Collapsing Table Borders in CSS
- Outlines Vs Borders in CSS
- Set the color of the four borders using CSS
- How to style the separator using CSS in JavaFX?
- How to create a modal popup using JavaScript and CSS?
- How to Create a Black and White Image Using CSS
- Setting List Style Type using CSS
- Effect of Color Property on Borders and Outlines in CSS
- How to style images with CSS?
Advertisements