EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

CSS Border Padding

By Sivaraman VSivaraman V

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Border Padding

CSS Border Padding

Introduction to CSS Border Padding

Padding is defined as space between the HTML contents and its borders. In general, padding will create some extra spaces within the HTML elements we can mention the padding in pixels, percentage format values in the document. CSS Border Padding value should be the length, percentages or some inherit the values with the parent HTML elements If we use a percentage set of values in the documents it containing some box alignments to the front end codes.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The basic syntax of the padding and borders are below.

CSS Border:

<html>
<head>
<style>
.sample
{
border-style; ;
border-style; ;
---------------
}
</style>
</head>
</html>

CSS Padding:

<html>
<head>
<style>
.sample
{
border:
padding:
}
----------some style tag codes-------
</style>
</head>
</html>

The above two codes are the basic syntax of the CSS borders and paddings use in the HTML documents. We can mention and specify the different sets of styles in <style> tag based on the user requirements. If we need some more additional content with animations like images, videos, etc it will add their own style attributes with predefined colors or styles, widths, and heights, etc.

How does Border Padding work in CSS?

Padding contains some set of CSS styles with their own properties that can be used to control the lists in HTML tags and elements with more sophisticated. We can set our own customized values with a different set of user requirements boxes containing four sides so CSS padding will use all the four sides of the HTML elements. Some CSS Border Padding properties like padding-top, padding-bottom, padding-left, and padding-right are some of the properties that have to use for the customized purposes of the web pages. Each property has a different set of features with alignments and their values will differ and the same when the customized users. We can set the images in padding for set the buffer set of values between the images and the HTML contents using some HTML editors to edit the contents and even though some CSS style alterations for the user requirements. We can add the images selectively for all sides of the padding styles.

In Borders, we can set the borders for all the sides mainly in the top, left, right and bottom sides. We can set the borders in HTML tables for storing and retrieving the datas in the back end SQL, non-SQL databases. Even though some clob, blob datas will be more spaces and sizes to take from front end to back end, then the borders will use to separate the view contents that are border type of styles like dotted-line, dashed, etc it will helpful for segregate the datas in front end views. Users will identify which datas like images, videos and HTML contents values in the back end of the databases.

The border is also one of the short-hand property, it sets the width, height, colors, and styles of the HTML contents. We know that shorthand properties omit the sub-values and reassign to the initial values. Mainly images we use in the HTML documents the border set of images will not accept the user-defined or customized values, we will specify it as none. Like something in outlines concepts in CSS also however we have some similarities between the outlines and borders. The border property is accepted the one or more values in the style tag based on the requirement we have to add the border values in the web pages with the help of their attributes.

Mainly HTML table has a border to align the datas segregated. When we apply the borders in CSS styles with the HTML tables it can apply the actual table of the HTML it will not mention the table cells individually. We can use the classes in both HTML and CSS we know about the actual benefits for these classes. We can set the borders in style tag and the same will call it in some tags with the help of the classes.CSS style classes to set all the styles in one place apart from that each HTML element will be added in the codes.

Examples of CSS Border Padding

The examples of the following are given below:

Example #1

<html>
<head>
<style>
.sample{
background: green;
color: red;
margin: 53px;
padding: 19px;
position: relative;
}
.sample:before {
border: 7px solid green;
content: "Hi Users";
position: absolute;
top: -49px;
bottom: -14px;
left: -19px;
right: -18px;
}
</style>
</head>
<div class="sample">
Welcome to my domain
</div>
</html>

Popular Course in this category
CSS Training (9 Courses, 9+ Projects)9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,429 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)jQuery Training (8 Courses, 5 Projects)

Output:

CSS Border Padding

Example #2

<html>
<head>
<style>
.sample { background-color:green;border-collapse:collapse; }
.sample th { background-color:green;color:red;width:55%; }
.sample td, .sample th { padding:7px;border:3px solid blue; }
</style>
</head>
<table class="sample">
<tr>
<th>Welcome</th><th>Users</th>
</tr>
<tr>
<td>Mobile Numbers</td><td>ID/td>
</tr>
<tr>
<td>Name</td><td>City</td>
</tr>
</table>
</html>

Output:

Mobile Numbers

Example #3

<html>
<head>
<style>
.sample {
border: 3px solid green;
border-radius: 6px;
padding: 7px;
width: 253px;
}
</style>
</head>
<div class="sample">
<img src="download.jpg"  alt="download" style="width:253px">
</div>
</html>

Output:

CSS Border Padding

Above three examples we have used both borders and paddings in the style tag elements. The first example is the basic example of borders and paddings on the web page we have created and declared both sets of borders and paddings value in CSS styles. The second example will use the HTML table with CSS styles alignments for using both borders and paddings on the web page, it will align the table values for storing, retrieving from the database. Final Example will use the image in the web page with the help of both alignments.

Conclusion

The above concepts are explained about the CSS paddings and border style usages in the web pages it needs to cover a wide variety of backgrounds like width, heights, and styles. In certain dimensions in the web browsers, the layouts of the HTML page is to be fraught with hassles and caveats.

Recommended Articles

This is a guide to CSS Border Padding. Here we discuss the introduction, how does Border Padding work in CSS along with respective examples and appropriate syntax. You can also go through our other related articles to learn more–

  1. CSS Inline Style
  2. CSS Shape Generator
  3. CSS Blinking Text
  4. CSS Border Generator

CSS Training (9 Courses, 9+ Projects)

9 Online Courses

9 Hands-on Projects

61+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
CSS Tutorial
  • CSS
    • Introduction To CSS
    • What is CSS?
    • Uses Of CSS
    • Advantages of CSS
    • Career In CSS
    • CSS Commands
    • Is Css Case Sensitive
    • CSS object-fit
    • Types of CSS Selectors
    • CSS Radio Button
    • CSS Attribute Selector
    • CSS first child of class
    • CSS Selector nth Child
    • CSS Parent Selector
    • CSS Child Selector
    • CSS Not Selector
    • CSS Descendant Selector
    • CSS Inline Style
    • Checkbox CSS
    • CSS Appearance
    • CSS Font Properties
    • CSS font-variant
    • CSS Pagination
    • CSS Table Styling
    • CSS Table Cell Padding
    • CSS Padding Color
    • CSS Text Formatting
    • CSS for Text-Shadow
    • CSS text-stroke
    • CSS text-indent
    • CSS Rotate Text
    • CSS Text Color
    • CSS Center Div
    • CSS Arrow
    • CSS Arrow Down
    • CSS offset
    • CSS Cursor
    • CSS Layout
    • CSS Grid Layout
    • Button in CSS
    • CSS Button Border
    • text-align in CSS
    • CSS Horizontal Align
    • CSS Position
    • CSS Box Sizing
    • CSS box-shadow
    • CSS Text Underline
    • CSS Text Outline
    • CSS Blinking Text
    • Text Decoration CSS
    • CSS Vertical Align
    • CSS Word Wrap
    • CSS Padding
    • CSS Font Color
    • CSS Color Generator
    • CSS Margin Right
    • CSS Margin Color
    • CSS Color Codes
    • CSS Color Transparent
    • CSS Color Chart
    • CSS Link Color
    • CSS z-index
    • CSS Curved Border
    • CSS Border Left
    • CSS left
    • CSS Gradient Generator
    • Radial Gradient in CSS
    • CSS Shape Generator
    • CSS Triangle Generator
    • CSS background-color
    • CSS Background Image
    • CSS background-clip
    • CSS background-blend-mode
    • CSS Drop Shadow
    • CSS line height
    • CSS line break
    • Sticky Footer CSS
    • CSS Header Design
    • CSS Border Style
    • CSS Border Generator
    • Sticky Sidebar CSS
    • CSS Transparent Border
    • CSS Border Radius
    • CSS translate
    • CSS transform
    • CSS 3D Transforms
    • CSS Text Transform
    • CSS Transition Effects
    • CSS Transition Property
    • CSS Animation Transition
    • Negative Margin CSS
    • CSS Navigation Bar
    • CSS Overflow
    • CSS overflow-wrap
    • CSS Lists
    • CSS list-style
    • CSS Order
    • CSS Box Model
    • CSS Inner Border
    • CSS Icon
    • Menu Icon CSS
    • CSS Multiple Borders
    • Opacity in CSS
    • CSS Float Right
    • CSS Clear Float
    • CSS clip
    • CSS disabled
    • CSS Border Padding
    • Border Images in CSS
    • CSS Visibility
    • CSS Validator
    • CSS Clearfix
    • CSS Counter
    • CSS Letter Spacing
    • CSS root
    • CSS zoom
    • CSS calc()
    • CSS.supports()
    • CSS Loader
    • Media Query CSS
    • CSS @keyframes
    • CSS @bottom
    • CSS page-break-after Property
    • CSS page-break
    • CSS Position Fixed
    • CSS skew()
    • CSS Row
    • CSS Masking
    • CSS Scrollbar
    • CSS Overlay
    • CSS Important
    • CSS Cursor Hand
    • CSS Inherit
    • CSS Position Relative
    • CSS Compressor
    • CSS tricks
    • CSS Outline Property
    • CSS Flexbox Properties
    • CSS flex-direction
    • CSS content property
    • CSS Typography
    • CSS Formatter
    • CSS nowrap
    • CSS Column
    • GridView CSS
    • CSS Viewport
    • CSS Minify
    • CSS Combinators
    • CSS in React
    • CSS Matrix 
    • CSS Pseudo Elements
    • CSS Pseudo Classes
    • CSS Pointer Events
    • CSS Resize
    • CSS Inheritance
    • CSS Interview Questions
    • Cheat Sheet CSS
  • CSS3
    • What is CSS3?
    • CSS3 Interview Questions
    • Cheat sheet CSS3
  • sass
    • How to Install SASS
    • SASS Interview Questions
    • What is Sass
    • SASS Comments
    • Sass Variables
    • SASS Import
    • SASS if else
    • SASS Nesting
    • SASS @each
    • SASS @at-root
    • SASS @extend
    • SASS @media
    • SASS @for
    • SASS Map
    • SASS Selectors
    • SASS Color Functions
    • SASS Mixins

Related Courses

CSS Training Course

Bootstrap Training Course

JQuery Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - CSS Training (9 Courses, 9+ Projects) Learn More