Create rounded corner image in HTML,PHP using Bootstrap classes

How to show images with rounded corners online inside webpage using bootstrap .img-rounded class.

In this tutorial we are simply using Bootstrap’s .img-rounded class . This class will automatically modify the given image inside img src tag and convert the normal image into rounded corners including image. So here is the complete step by step tutorial for Create rounded corner image in HTML,PHP using Bootstrap classes.

How to Create rounded corner image in HTML,PHP using Bootstrap classes.

https://www.android-examples.com/demo/heading-tag.html
Code for rounded-corner-image.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rounded Corner Image</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Rounded Corner Image</h1>

<img src="https://www.android-examples.com/wp-content/uploads/2016/01/sample_round-image.png" class="img-rounded" alt="Rounded Corner Image" width="300" height="300">
 
</div>

</body>
</html>

Screenshot:

Create rounded corner image in HTML,PHP using Bootstrap classes

Leave a Reply

Your email address will not be published. Required fields are marked *