❐CSS❐

❐wD Learn

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

CSS Border CSS borders help define the visual boundaries of HTML elements. It can be text, div, p, h1, etc.

Border Style Border styles define the style of the border.

Example


<html lang="en">
<head>
<style>
.none {

border-style: none;

}
.hidden {

border-style: hidden;

}
.dotted {

border-style: dotted;

}
.dashed {

border-style: dashed;

}
.solid {

border-style: solid;

}
.double {

border-style: double;

}

.groove {

border-style: groove;

}
.ridge {

border-style: ridge;

}
.inset {

border-style: inset;

}
.outset {

border-style: outset;

}
</style>
</head>
<body>
<p class="none">no border</p>
<p class="hidden">Hidden Border</p>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="solid">Solid border</p>
<p class="double">Double Border</p>
<p class="groove">Groove border</p>
<p class="ridge">ridge border</p>
<p class="inset">inset border</p>
<p class="outset">Outset Border</p>
</body>
</html>
Border Color The border color property sets the colour of the border. We can use colour name, hex, rgb, or hsl to set the color.

Example


<html lang="en">
<head>
<style>
.dotted {
border-style: dotted;
color: purple;
}
.dashed {
border-style: dashed;
border-color: #FF0000;
}
.solid {
border-style: solid;
border-color: rgb(100, 233, 12);
}
.double {
border-style: double;
border-color: hsl(10, 50, 30);
}
</style>
</head>
<body>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="solid">Solid border</p>
<p class="double">Double Border</p>
</body>
</html>
Border Width Specifies the width of the border. Sets the width of the border in pixels,or there are values like medium, thin, and thick

Example


<html lang="en">
<head>
<style>
.solid1 {
border-width: 5px;
border-style: solid;
border-color: red;
}
.solid2 {
border-width: thin; /* thin || medium || thick */
border-style: solid;
border-color: #FF0000;
}
</style>
</head>
<body>
<p class="solid1">Solid border 1</p>
<p class="solid2">Solid border 2</p>
</body>
</html>
Border Radius Border radius helps create rounded borders for elements like buttons or images.

Example


<html lang="en">
<head>
<style>
.solid1 {
border-radius: 20px;
border-style: solid;
border-color: red;
}
.solid2 {
border-radius: 25%;
border-style: solid;
border-color: #FF0000;
}
</style>
</head>
<body>
<p class="solid1">Solid border 1</p>
<p class="solid2">Solid</p>
</body>
</html>