- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 −
- Related Articles
- 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
- Add rounded borders to first and last link in the pagination using CSS
- Adding Borders to Tables in CSS
- How to style the separator using CSS in JavaFX?
- Set the color of the four borders using CSS
- Collapsing Table Borders in CSS
- Outlines Vs Borders in CSS
- How to create a modal popup using JavaScript and CSS?
- How to create Expanding Cards using HTML, CSS, and JavaScript
- How to Create a Black and White Image Using CSS
- How to create Custom Cursor using CSS
- How to style images with CSS?

Advertisements