CSS is a beast and you can use it for customizing each element on your site. Making a rounded corner element is also a very easy task with the help of CSS. Most content management systems and website builders by default offer this function. You can this feature to showcase your images, buttons and text boxes to have a rounded corner. However, Weebly does not offer a way to control the rounded corner of an element. As far as we checked, most of the Weebly themes have very sharp image and button elements. In this article we will explain how to make CSS rounded corner elements for Weebly site.
Related: How to create rounded corner images in WordPress?
What is a Rounded Corner?
If you are still not clear what is the rounded corner, then below is an example showing an image with sharp corners and rounded corners.
You can achieve rounded corner by defining a “border-radius” property using CSS. Good part is that you can apply this CSS property for any elements like images, buttons, text boxes, etc.
Making Rounded Corner Images in Weebly
In Weebly, you can use images as an individual element, products, gallery and slideshows. But do not worry, each image in Weebly is always controlled with HTML img tag. You can define custom CSS properties for the .img class in Weebly. If your theme does not have a “border-radius” property added to img class in “main_style.css” or “style.less” then the images will not have rounded corner.
In order to make the images rounded corner, add the following CSS code in your “main_style.css” or “style.less” file:
.img {
border-radius:10px;
}
This will make all images to have 10px border radius on all four corners. Remember, it includes the images used in logo, gallery, products and slideshow, . You can also exclude the border radius only for the images on certain elements. You can do this by defining the border radius as 0 only for that element. For example, you may not want the logo to have rounded corner. In this case, add the “border-radius: opx” to “.wsite-logo img” class in main stylesheet. Below is how it will look:
.wsite-logo img {
max-height: 70px; /* This is an existing line */
border-radius: none !important; /* This is a line to remove the rounded corner */
}
If you want to control different radius for different corners then use the below code:
img {
border-radius: 10px 8px 15px 12px;
}
This will make the image to have different border radius in the following order – top (10px), right (8px), bottom (15px) and left (12px).
It is also possible to control the border radius of images uploaded only on a single page. Just add the CSS code in the header section of the page under “Pages” tab within < style > …. </ style > tags. You can also paste the code under header section of site settings to be effective on all pages without modifying the theme’s stylesheet.
Modifying Buttons
Similar to images most of the Weebly responsive themes have sharp edged buttons which can also be made into a rounded corner using the below CSS:
.wsite-button, .blog-button {
border-radius:10px;
}
You can modify the code directly in main CSS or add the code under the header section of your site settings to be effective on all pages.
Related: How to use developer platform in Weebly?
Adding Rounded Text Boxes
Sometime you may need to add text boxes only on few places. In this case you can use the style within the “Embed Code” element as inline so that the code is affecting only that element. For example, you can the below code inside “Embed Code” element to make a rounded corner text box:
<p style="background-color:#02f3e5; border-radius:8px; padding:15px; margin:5px;"><b>This is a sample text box with rounder corner using “border-radius” property with inline CSS affecting only the text box element.</b> </p>
It will look like below:
This is a sample text box with rounder corner using “border-radius” property with inline CSS affecting only the text box element.
You can make the corners rounded for any element in similar manner using CSS “border-radius” property.
1 Comment
Leave your reply.