In this tutorial we will show you the solution of border-corner-shape css, as we know css used to style html elements here we using border style property to shows what are the shape we can make given in our example.
We first create border around html element then we need to make shape so we have to use border radius style property to make some shapes.
Step By Step Guide On border-corner-shape CSS :-
In our program we defined two <p> tag with some texts and one <div> tag. We can implement styles using three types (i.e inline,external or internal).
Here we used two types inline and internal. Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition.
In first <p> tag we used inline style, we defined border property to create border around that text then we used border-radius property value ‘20px’ so borders each side edge curved to amount of ‘20px’. Finally we gets curve shape border.
Next <p> tag we used inline style, we defined border property to create border around that text then without border-radius property border style will default square shape.
Using <div> tag we created square shape box with green background there we used border-radius property with four values so four border edge curve will depends that respective values.
<!DOCTYPE html>
<html>
<head>
<title>BORDER CORNER SHAPE</title>
<style>
div{
background-color: green;
width: 20%;
height: 20%;
border-radius: 10px 50px 3px 90px;
position: absolute;
}
</style>
</head>
<body>
<p style=" border: 1px solid #555;border-radius: 20px; width: 30%;">Hi! everyone welcome to our website</p>
<p style="border: 1px solid #555; width: 20%;"><b>Here we using "b" tag for bold this line</b></p>
<div></div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Here we defined internal style to style <div> element. We make square using style property of ‘width: 20%;height: 20%;position:absolute;’ then we filled square box with ‘green’ color background refers style property ‘background-color: green;’ and ‘border-radius: 10px 50px 3px 90px;’ used to make box each side to be curve shape.
- Those curve shape amount depends on ‘border-radius’ values. In border-radius value ‘10px’ refers box’s top-left side corner shape, value ‘50px’ refers box’s top-right side corner shape, value ‘3px’ refers box’s bottom-right side corner shape and value ‘90px’ refers box’s bottom-left side corner shape.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In first <p> tag we had style with ‘border’ property in ‘border: 1px solid #555’ ‘1px’ refers border thickness/width ‘solid’ refers ‘border-style’ and ‘#555’ refers border color. We used style ‘width:30%’ because without this property border will covers whole width of the page so we have to mention width.
- Next <p> tag we had style with ‘border’ property as we seen above it same as but here we are not used ‘border-radius’ style so we gets square shape border this is also a default shape.
- Finally we just declared <div> tag then we style this using ‘internal’ style method as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know about how to create border and how to make shape in border.
We can make two shapes using border property either square shape corner or curve shape corner it depends on ‘border-radius’ style property.
When we giving more amount of value for ‘border-radius’ then we can get round shape also.
This style property makes html element looks too great, using this try to create elements with creative styles by your own thoughts.
I hope this tutorial on border-corner-shape css helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
