CSS Border

Home / CSS / CSS Border

CSS Border

CSS Border:

The border-style property specifies what kind of border to display.

In CSS, the border-style property is used to define the style of an element's border. It specifies the type of border to be applied to all four sides of the element's box. The border-style property can accept one of several predefined values, each representing a different border style. 

Example :
 
<style>      
    div{
        width: 200px;
        border: 2px solid red;
    }
    </style>
<body>
    <div>Saksham Digital technology</div>
</body>


Output: 
Example :

<head>
    <style>      
    .box1{
        border:10px  dotted green ;
    }
    .box2{
        border:5px dashed green ;
    }
    .box3{
        border:10px double green ;
        border-style: double;
    }
    .box4{
        border:10px ridge green ;
    }
    .box5{
        border:10px inset rgb(224, 31, 21) ;
    }
    .box6{
        border:10px outset rgb(64, 33, 201) ;
    }
    </style>
</head>

Output: 

CSS Border-Radius Property:

CSS border-radius is a property that allows you to round the corners of elements, such as boxes or divs. It's a useful property for creating visually appealing and modern designs in web development. The border-radius property can take one or more values to define the radius of each corner.

Here's the basic syntax for the border-radius property:

 
<style>
    element {
      border-radius: value;
    }
  </style>

You can specify different values for each corner or use shorthand to set values for all corners at once.

Single Value: When you provide a single value, all four corners will have the same radius, creating rounded corners of equal curvature:


 <style>
    element {
      border-radius: 10px;
    }
  </style>

Two Values: You can specify two values to create different horizontal and vertical radii for the corners. The first value sets the horizontal radius, and the second value sets the vertical radius:


<style>
    element {
      border-radius: 10px 20px;
    }
  </style>

Four Values: When you provide four values, they represent the radii for the top-left, top-right, bottom-right, and bottom-left corners, respectively, in a clockwise order:


<style>
    element {
      border-radius: 10px 20px 30px 40px;
    }
  </style>

Elliptical Radii: You can also create elliptical corners by specifying two pairs of values, one for the horizontal radius and one for the vertical radius. This allows you to create more complex shapes for the corners:


 <style>
    element {
      border-radius: 20px 10px 30px 50px;
    }
  </style>

Percentage Values: Instead of using pixel values, you can use percentage values for the radii, which are relative to the dimensions of the element. This can make it easier to create responsive designs:

 
<style>
    element {
      border-radius: 50%;
    }
  </style>

Here's an example of how you can apply border-radius to an HTML element:


<!DOCTYPE html>
<html>
<head>
  <style>
    .rounded-box {
      width: 200px;
      height: 100px;
      background-color: #3498db;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="rounded-box">This is a rounded box.</div>
</body>
</html>