Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

How To Create Box Effects And Border In CSS3?

Border means a boundary. In HTML, border is applied to a division tag or section. This border can be of any type like solid, dashed, dotted etc. You can also decide the color of border.

Border and Box effects :
You can apply different effects to a border/box like shadow, size etc. let’s see how it works -

The CSS border properties allow you to specify the style, width, and color of an element’s border. You can define border’s width like 1px, 2px or etc. and also define the type of border like solid, dashed, dotted etc. Also, color can be defined for borders.

Let’s see Example of this :
<div class= “solidbor”>
This is solid border
</div>
In CSS define :
.solidbor{border:3px solid red;}

Save it and go to browser to see the effects. You will see a 3px red solid border is applied around text.

Same way for dotted border, write dotted in place of solid and make other changes as you want to show and see the result in browser. Now, if you want only one side of border then, add border-top in CSS and you will see, only top of the border is shown up.

Now, to make soft corners of the border, write border-radius:10px and see rectangle border is become rounded rectangle. As shown in video, by adding height and width as 300px, it shows a circle on browser. If you change the size of width or height, the shape will change accordingly as per mathematical calculation. You can take any type of border like dashed, dotted, grooved etc. to make a circle or any other object.

There are different effects generated on border using CSS elements :

Ridge : it defines a 3D ridged border. The effect depends on the border-color value.

Insert : This defines a 3D inset border. The effect depends on the border-color value.

Outset : Outset defines a 3D outset border. The effect depends on the border-color value.

None : defines no border.

Hidden : it defines a hidden border.

Border radius :
It is used to add rounded corners to an element. If you specify only one value for the border-radius property, this radius will be applied to all 4 corners. Now suppose you want only 1 radius in corner instead of all rounded corners, to do that :

.solidbor{border: 3px solid red; width:350px; height: 300px; border-top-right-radius: 20px;}

See the effect in browser, only top right corner is rounded. Also you can apply different radius to all four corners. As shown in video, define :

.solidbor{border: 3px solid red; width:350px; height: 300px; border-radius : 10px 20px 30px 40px;}

This will make all corners’ radius different as shown in video. This way also you can define border radius.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere