Borders are used in CSS to define the outline around an element. They help separate content, highlight sections, and improve the overall visual structure of a webpage. Border radius is used to create rounded corners, which gives a modern and smooth look to elements.<\/p>\n\n\n\n
Borders have three main properties: width, style, and color. These properties can be applied together or separately depending on the design requirement.<\/p>\n\n\n\n
The border width defines how thick the border appears. It can be set using values like thin, medium, thick, or specific units such as pixels.<\/p>\n\n\n\n
The border style determines the appearance of the border. Common styles include solid, dashed, dotted, double, and none.<\/p>\n\n\n\n
The border color sets the color of the border. It can be defined using color names, hex codes, RGB, or other color formats.<\/p>\n\n\n\n
Example of a simple border in CSS:<\/p>\n\n\n\n
.box {
border: 2px solid blue;
}<\/pre>\n\n\n\nYou can also control each side of the border individually. This allows more flexibility when designing layouts.<\/p>\n\n\n\n
.box {
border-top: 2px solid red;
border-right: 2px dashed green;
border-bottom: 2px solid blue;
border-left: 2px dotted black;
}<\/pre>\n\n\n\nBorder radius is used to round the corners of an element. It can be applied to all corners or specific corners.<\/p>\n\n\n\n
A basic example:<\/p>\n\n\n\n
.box {
border: 2px solid black;
border-radius: 10px;
}<\/pre>\n\n\n\nThis will create slightly rounded corners. Increasing the value will make the corners more curved.<\/p>\n\n\n\n
You can also create a perfect circle by setting the border radius to 50 percent, as long as the element has equal width and height.<\/p>\n\n\n\n
.circle {
width: 100px;
height: 100px;
border: 2px solid black;
border-radius: 50%;
}<\/pre>\n\n\n\nIt is also possible to control each corner separately using properties like border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
.box {
border: 2px solid black;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}<\/pre>\n\n\n\nBorders and border radius are essential tools in CSS for creating visually appealing and structured designs. They are commonly used in buttons, cards, images, and containers to improve user experience and layout clarity.<\/p>\n\n\n\n
<\/p>\n","protected":false},"menu_order":0,"template":"","class_list":["post-100","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n
Borders & Border Radius - CSS learning mastery<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Borders & Border Radius - CSS learning mastery\" \/>\n<meta property=\"og:description\" content=\"Borders are used in CSS to define the outline around an element. They help separate content, highlight sections, and improve the overall visual structure of a webpage. Border radius is used to create rounded corners, which gives a modern and smooth look to elements. Borders have three main properties: width, style, and color. These properties […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/\" \/>\n<meta property=\"og:site_name\" content=\"CSS learning mastery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/borders-border-radius\\\/\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/borders-border-radius\\\/\",\"name\":\"Borders & Border Radius - CSS learning mastery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\"},\"datePublished\":\"2026-04-07T01:24:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/borders-border-radius\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/borders-border-radius\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/lesson\\\/borders-border-radius\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Borders & Border Radius\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/gigz.pk\\\/css\\\/#website\",\"url\":\"https:\\\/\\\/gigz.pk\\\/css\\\/\",\"name\":\"CSS learning mastery\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/gigz.pk\\\/css\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Borders & Border Radius - CSS learning mastery","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:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/","og_locale":"en_US","og_type":"article","og_title":"Borders & Border Radius - CSS learning mastery","og_description":"Borders are used in CSS to define the outline around an element. They help separate content, highlight sections, and improve the overall visual structure of a webpage. Border radius is used to create rounded corners, which gives a modern and smooth look to elements. Borders have three main properties: width, style, and color. These properties […]","og_url":"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/","og_site_name":"CSS learning mastery","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/","url":"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/","name":"Borders & Border Radius - CSS learning mastery","isPartOf":{"@id":"https:\/\/gigz.pk\/css\/#website"},"datePublished":"2026-04-07T01:24:47+00:00","breadcrumb":{"@id":"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/gigz.pk\/css\/lesson\/borders-border-radius\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/gigz.pk\/css\/"},{"@type":"ListItem","position":2,"name":"Borders & Border Radius"}]},{"@type":"WebSite","@id":"https:\/\/gigz.pk\/css\/#website","url":"https:\/\/gigz.pk\/css\/","name":"CSS learning mastery","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gigz.pk\/css\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/lesson"}],"about":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/types\/lesson"}],"wp:attachment":[{"href":"https:\/\/gigz.pk\/css\/wp-json\/wp\/v2\/media?parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}