{"id":112627,"date":"2023-03-13T09:00:12","date_gmt":"2023-03-13T03:30:12","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112627"},"modified":"2024-07-29T16:03:13","modified_gmt":"2024-07-29T10:33:13","slug":"border-in-css","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/border-in-css\/","title":{"rendered":"Border in CSS"},"content":{"rendered":"

CSS border is a property used to add a border around HTML elements. The border property is a shorthand property, which allows you to set the width, style, and color of an element’s border all at once. It can be applied to all HTML elements, including text, images, and tables. The border width can be set in pixels, ems, or percentages, and the style can be set to solid, dotted, dashed, double, groove, ridge, inset, or outset. The color of the border can be set using a color name, hex code, or RGB value. Additionally, the border-radius property can be used to create rounded corners on the border.<\/p>\n

Therefore borders are very helpful in improving much of the visual hierarchy and design of a web page. For example, the use of borders is highly advisable since they make it easier to separate various sectors or entities within the space, thus enhancing readability.<\/p>\n

Designers need to be very attentive selecting border styles and colors since they can dictate and generate emphasis and interactivity on areas of a page that are required. Moreover, border properties can be integrated with other CSS styles like box-shadow and background images to create rich and interesting visual effects and designs.<\/p>\n

Some properties of CSS Border<\/h3>\n

The main properties of CSS border are:<\/p>\n

1. border-style:<\/strong> specifies the style of the border, such as solid, dotted, or dashed.<\/p>\n

Example<\/strong>:<\/p>\n

<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-style: solid;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a solid border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\"border<\/a><\/p>\n
2. border-width:<\/strong> specifies the width of the border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-width: 2px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a 2px wide border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
style.css<\/strong><\/p>\n
div {\r\n  border-width: 2px;\r\n  border-style: solid;\r\n}\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
\"border<\/a><\/p>\n
3. border-color:<\/strong> specifies the color of the border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-color: red;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a red border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
style.css<\/strong><\/p>\n
div {\r\n  border-width: 2px;\r\n  border-style: solid;\r\n<\/pre>\n
\"border<\/a><\/p>\n
4. border-top:<\/strong> sets the style, width and color of the top border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-top: 2px solid red;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a 2px wide, solid red top border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
\"border<\/a><\/p>\n
5. border-right:<\/strong> sets the style, width and color of the right border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-top: 2px solid red;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a 2px wide, solid red right border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\"border<\/a><\/p>\n
6. border-bottom:<\/strong> sets the style, width and color of the bottom border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-bottom: 2px solid red;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a 2px wide, solid red bottom border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\"border<\/a><\/p>\n
7. border-left:<\/strong> sets the style, width and color of the left border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <h1>Welcome to DataFlair<\/h1>\r\n    <style>\r\n      div {\r\n        border-left: 2px solid red;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with a 2px wide, solid red left border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\"border<\/a><\/p>\n
8. border-radius:<\/strong> sets the roundness of the border.<\/p>\n
Example:<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-radius: 10px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with 10px round corner border.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
\"border<\/a><\/p>\n
9. border-image:<\/strong> sets the image for the border.<\/p>\n
Example<\/strong>:<\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      div {\r\n        border-image: url(\"border.png\") 30 30 stretch;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div>This is a div element with an image border taken from \"border.png\" and 30px of width and height.<\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
CSS Border Styles<\/h3>\n
1. solid:<\/strong> Creates a solid border with a single color and thickness.<\/p>\n
2. dotted:<\/strong> Creates a border with small dots separated by the background color.<\/p>\n
3. dashed:<\/strong> Creates a border with short dashes separated by the background color.<\/p>\n
4. double:<\/strong> Creates a border with two parallel solid lines.<\/p>\n
5. groove:<\/strong> Creates a 3D border that appears to be carved into the page, with darker colors on the top and left sides.<\/p>\n
6. ridge:<\/strong> Creates a 3D border that appears to be raised from the page, with lighter colors on the top and left sides.<\/p>\n
7. inset:<\/strong> Creates a 3D border that appears to be pushed into the page, with darker colors on the bottom and right sides.<\/p>\n
8. outset:<\/strong> Creates a 3D border that appears to be popping out of the page, with lighter colors on the bottom and right sides.<\/p>\n
9. none:<\/strong> Creates no border at all, which can be useful for overriding inherited border styles.<\/p>\n
10. hidden:<\/strong> Creates a border that is invisible, but still takes up space. This can be useful for creating hidden elements that still affect layout.<\/p>\n
11. dotted dashed:<\/strong> Creates a border with alternating dots and dashes.<\/p>\n
12. solid double:<\/strong> Creates a border with a solid line on the inside and outside, and two parallel lines in the middle.<\/p>\n
13. groove ridge<\/strong>: Creates a 3D border that alternates between a groove and a ridge, giving a zigzag appearance.<\/p>\n
14. ridge groove:<\/strong> Creates a 3D border that alternates between a ridge and a groove, giving a zigzag appearance.<\/p>\n
15. ridge outset:<\/strong> Creates a 3D border that appears to be popping out of the page, with lighter colors on the top and left sides and darker colors on the bottom and right sides.<\/p>\n
16. inset outset:<\/strong> Creates a 3D border that appears to be pushed into the page on the top and left sides, and popping out on the bottom and right sides.<\/p>\n
17. hidden double:<\/strong> Creates a border that is invisible, but still takes up space, and also adds a second border that is visible.<\/p>\n
18. dashed dotted:<\/strong> Creates a border with alternating dashes and dots.<\/p>\n
Conclusion<\/h3>\n
So we can say that CSS border property can be applied to all HTML elements, including text, images, and tables. The border width can be set in pixels, ems, or percentages, and the style can be set to solid, dotted, dashed, double, groove, ridge, inset, or outset.<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS border is a property used to add a border around HTML elements. The border property is a shorthand property, which allows you to set the width, style, and color of an element’s border...<\/p>\n","protected":false},"author":581,"featured_media":112639,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27316,27312,27314,27313,27315],"class_list":["post-112627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-border-css-property","tag-border-in-css","tag-border-radius","tag-css-border-style","tag-rounded-border-css"],"yoast_head":"\nBorder in CSS - DataFlair<\/title>\n<meta name=\"description\" content=\"CSS border property can be applied to all HTML elements, including text, images, and tables. The border width and style can be set as needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/border-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Border in CSS - DataFlair\" \/>\n<meta property=\"og:description\" content=\"CSS border property can be applied to all HTML elements, including text, images, and tables. The border width and style can be set as needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/border-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-13T03:30:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-29T10:33:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Border in CSS - DataFlair","description":"CSS border property can be applied to all HTML elements, including text, images, and tables. The border width and style can be set as needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/border-in-css\/","og_locale":"en_US","og_type":"article","og_title":"Border in CSS - DataFlair","og_description":"CSS border property can be applied to all HTML elements, including text, images, and tables. The border width and style can be set as needed.","og_url":"https:\/\/data-flair.training\/blogs\/border-in-css\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-03-13T03:30:12+00:00","article_modified_time":"2024-07-29T10:33:13+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"Border in CSS","datePublished":"2023-03-13T03:30:12+00:00","dateModified":"2024-07-29T10:33:13+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/"},"wordCount":707,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp","keywords":["border css property","Border in CSS","border radius","css border style","rounded border css"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/border-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/","url":"https:\/\/data-flair.training\/blogs\/border-in-css\/","name":"Border in CSS - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp","datePublished":"2023-03-13T03:30:12+00:00","dateModified":"2024-07-29T10:33:13+00:00","description":"CSS border property can be applied to all HTML elements, including text, images, and tables. The border width and style can be set as needed.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/border-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/03\/css-border.webp","width":1200,"height":628,"caption":"css border"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/border-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"Border in CSS"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112627"}],"version-history":[{"count":6,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112627\/revisions"}],"predecessor-version":[{"id":143027,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112627\/revisions\/143027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/112639"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}